一:概念
作用:拦截导航,让他完成跳转或取消。
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// do someting
});
- to: 要进入的目标,路由对象
- from: 要离开的路由,路由对象
- next: 一个必须需要调用的方法,而具体的执行效果则依赖 next 方法调用的参数
- next():如果一切正常,则调用这个方法进入下一个钩子,导航钩子结束。
- next(false):取消导航(即路由不发生改变)。
- next('/login'):当前的导航被中断,然后进行一个新的导航(路径可自由指定)。
- next(error):如果一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
2:常用场景
-
比如某些页面需要先验证是否登录,如果登录了就可以访问,否则跳转到登录页。
//全局路由改变前钩子
router.beforeEach((to, from, next) => {
//这里简单地使用localStorage来判断是否登陆
if(window.localStorage.getItem('token')){
next();
}else{
next('/login');
}
})
3: 可替代的方法---》使用 watch 监测路由变化
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
</script>