导航守卫:当Router(路由)之间发生跳转时,会触发导航守卫。(url发生改变时就会触发导航守卫)
1.前局前置导航守卫
通过 router.beforeEach 注册全局组件
to:即将要进入的路由对象
from:要离开的路由对象
next: 是一个函数里面有类容就是跳转类容 没有类容就是放行
注意: next
函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错(白话理解:给定的导航守卫一次只能有一个next被运行)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
console.log(to) // to:即将要进入的路由对象
console.log(from) // from:要离开的路由对象
next('路由对象') // next: 是一个函数里面有类容就是跳转类容 没有类容就是放行
})
实例:
// GOOD
router.beforeEach((to, from, next) => {
//判断是不是跳转 /login
if (to.fullPath === '/login') {
// 如果是跳转login再判断本地存储有没有token
if (localStorage.getItem('token')) {
// 有token就跳转到 /index
next('/index')
} else {
// 没有token就跳转到通过 直接去 /login
next()
}
} else {
// 如果跳转不是/login直接放行
next()
}
})
全局解析守卫
在 2.5.0+ 你可以用 router.beforeResolve
注册一个全局守卫。这和 router.beforeEach
类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
就是等他的前置路由守卫,还有局部的前置路由守卫执行完后在执行全局解析守卫
3.全局后置钩子(不怎么常用了解一哈)
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next
函数也不会改变导航本身!(当后置钩子被执行时,已经发生跳转了)
router.afterEach((to, from) => {
// ...
})
4.路由独享的守卫(直接写在路由配置上)()
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
5.组件内的守卫(敲黑板!!!敲黑板!!)
这个其实有些常用的!!原生中如果想要监视 当前 URL 的锚部分(hash值) 时,可以用到onhashchange事件;但是Vue中不推荐使用onhashchange(压根就不能用);这个时候就可以使用组件内的路由守卫来代替此操作。
beforeRouteEnter(组件渲染前调用 所以没有this指向)
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
console.log(to) // to:即将要进入的路由对象
console.log(from) // from:要离开的路由对象
next('路由对象') // next: 是一个函数里面有类容就是跳转类容 没有类容就是放行
},
beforeRouteUpdate
(2.2 新增) (当路由跳转时调用)(常用)
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log(to) // to:即将要进入的路由对象
console.log(from) // from:要离开的路由对象
next('路由对象') // next: 是一个函数里面有类容就是跳转类容 没有类容就是放行
},
beforeRouteLeave (导航离开当前路由对象时调用)
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log(to) // to:即将要进入的路由对象
console.log(from) // from:要离开的路由对象
next('路由对象') // next: 是一个函数里面有类容就是跳转类容 没有类容就是放行
},
组件内守卫直接写在组件里的methods里面,不需要调用