前言
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
