Vue中的路由
一、路由理解
二、基本配置
第一步:在main.js中引入并且使用插件
第二步:在src文件夹下创建一个router文件夹然后在文件夹下创建index.js
第三步:回到main.js中引入创建的router并在vue实例对象中使用
三、路由的使用
第一点:a标签在路由中的改变
第二点:多级路由
第三点:路由传参
query传参
params传参
replace属性
四、编程式路由导航
五、缓存组件和两个生命周期钩子
1、缓存路由组件
2、两个新的生命周期钩子
六、路由守卫
第一种、全局守卫
第二种、局部守卫
第三种、组件守卫
一、路由的理解
什么是路由:
1、路由就是一组映射关系
2、key为路,value可能是function或component
路由的工作过程:
当浏览器的路径改变时,对应的组件就会显示
二、路由的使用
1、实现点击切换以及高亮样式的配置
2、作用:控制路由跳转时操作浏览器历史记录的模式
3、浏览器的历史记录有两种模式:
一、push:
push是追加历史记录
二、
replace是替换当前记录，路由跳转时候默认为push
三、 直接在添加replace
指定显示位置:
路由的注意点: （vue路由钩子和路由守卫都是同一个意思。）
1、当我们使用vue-router的hash路由模式的时候，进入同路径组件，但参数不一样的时候，我们无法触发他的加载声明周期，这样的话会导致，我要请求数据的接口的方法不会触发，那我就无法拿到数据进行页面的渲染。
beforeRouteEnter: (to,from,next) => {
console.log('beforeRouteEnter ==', to,from)
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
next()
},
beforeRouteUpdate: (to,from,next) => {
console.log('beforeRouteUpdate ==', to,from)
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
next()
},
beforeRouteLeave: (to,from,next) => {
console.log('beforeRouteLeave ==', to,from) // 可以访问组件实例 `this`
//业务使用场景：
//1.清除定时器
//2.当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转
next()
},
2、这个时候，我们却可以触发beforeRouteUpdate这个生命周期，这样的话，我们是可以在这个组件路由钩子调用发起请求的方法的，我们这个生命周期是能拿到this的。
三、多级路由的嵌套
1、配置路由规则，使用children配置项：
routes:[
{
path:'/about',
name:'',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message
}
]
}
]
2、跳转的时候要写完整路径：
<router-link class="list-group-item" to="/home/news" active-class="active"></router-link>
四、路由守卫
1.全局守卫
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
if (sessionStorage.getItem("token")) {
next("/")
} else {
next()
}
} else {
if (sessionStorage.getItem("token")) {
next()
} else {
next("/login")
}
}
});
2.局部守卫（在需要守卫的页面添加（meta:{isLogin:true }））;
router.beforeEach((to, from, next) => {
if (to.matched.some(v => { return v.meta.isLogin == true })) {
if (sessionStorage.getItem('token')) {
next()
} else {
next('/login')
}
} else {
next()
}
})
