vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。
1、全局钩子
2、单个路由钩子
3、组件钩子
都必须要有 next() ,否则页面不会进行跳转
全局钩子:在每个页面切换的时候都会经过此钩子
// 注册一个全局钩子,防跳墙
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
let
token
=
localStorage
.
getItem
(
'mytoken'
)
if
(
token
) {
next
()
}
else
{
if
(
to
.
path
!==
'/login'
) {
// 如果没有登录,但你访问其他需要登录的页面,那我就让你跳到登录页面去
next
({path:
'/login'
})
}
else
{
// 如果没有登录,但你访问的login,那就不干涉你,让你访问
next
()
}
}
})
// router.afterEach(route=> {
// // 此处没有next()
// console.log(this)
// })
单个路由钩子:写在单个路由配置上面
{
name:
'roles'
,
path:
'roles'
,
// 单个路由钩子
beforeEnter
: (
to
,
form
,
next
)
=>
{
console
.
log
(
this
)
},
component:
Role
}
组件内钩子:写在组件内部
export
default
{
data
(){
return
{
}
},
methods: {
addGoods
(){
this
.
$router
.
push
({name:
'addGoods'
})
}
},
// 组件内钩子
beforeRouteEnter
(
to
,
from
,
next
){
console
.
log
(
this
)
//undefined
//不能获取组件this,因为当钩子执行前组件实例还未创建
// next()
},
beforeRouteUpdate
(
to
,
from
,
next
){
//在当前路由改变,并且该组件复用时才调用
//例如,对于一个带有参数的路径 /foo/:id, 当/foo/:1跳转到 /foo/2时候
//此时foo组件,被复用,此时这个钩子会调用
console
.
log
(
this
)
next
()
},
beforeRouteLeave
(
to
,
from
,
next
){
console
.
log
(
this
)
next
()
},
}