前言

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

一、插件使用1

1. 安装router插件

npm install vue-router --save

2. 创建路由模块文件router.js

1) 导入路由插件vue-router

import VueRouter from 'vue-router'

2) 安装路由

Vue.use(VueRouter)

3) 创建路由对象，配置路由规则

const vueRouter = new VueRouter({
  routes: [
   {
     path: '/',
     component: News
   },
   {
     path: '/user',
     component: ()=> import('@/components/User.vue')
   }
  ]
});

4) 暴露路由模块

export default vueRouter;

二、插件使用2

1. main.js入口文件中集成路由插件到vue

import Vue from 'vue'
import App from './App.vue'
// 导入router组件
import router from './router'

Vue.config.productionTip = false

new Vue({
  // 集成路由
  router,
  render: h => h(App)
}).$mount('#app')

2. 路由输出位置

<router-view></router-view>

三、路由路由和命名路由

四、路由跳转方式

1. router-link

router-link 路由跳转
router-view 路由输出

2. this.router.push() 实现路由跳转

this.$router.push({ path: "/user/list" });

3. this.router.replace() 实现路由传参

this.$router.replace({ path: "/user/list" });

push跳转和replace跳转的区别

push 跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面

replace 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

五、路由传参

1. query 传参

传参

<router-link :to="{path:'/nba', query:{text:'这里是NBA的模块'}}">NBA</router-link>

接收参数

<template>
  <div>
    <h3>NBA模块</h3>
    {{$route.query.text}}
  </div>
</template>

2. params 传参

传参

<router-link :to="{name:'NEWS', params:{name:'张三', age: '23'}}">新闻</router-link>

接收参数

<template>
  <div>
    <h3>新闻模块</h3>
    <p>姓名：{{$route.params.name}}</p>
    <p>年龄：{{$route.params.age}}</p>
  </div>
</template>

query 传参和params传参的区别

query 传参的时候，参数会跟在路径后面

params 传参，参数会隐藏

六、push和replace传参

上面介绍的是在router-link中传参的方式，下面介绍在push和replace中传参，也是有query和replace两种传参方式

1. push传参

this.$router.push({ path: "/user/list", params:{name:'张三', age: '23'}});

this.$router.push({ path: "/user/list", query:{text:'这里是NBA的模块'}});

2. replace传参

this.$router.replace({ path: "/user/list", params:{name:'张三', age: '23'}});

this.$router.replace({ path: "/user/list", query:{text:'这里是NBA的模块'}});

七、Route 和 Router的区别

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等。
打印this.$route和this.$router