正如其名,vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫
。你可以通过观察$route
对象来应对这些变化,或使用beforeRouteUpdate
的组件内守卫。
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用 beforeRouteLeave 守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
是否登录并跳转登录页面
// 路由元信息meta
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/',
name: 'Home',
component: Home,
meta: {
needLogin: true // 是否需要登录
}
}
]
// 使用 router.beforeEach 注册一个全局前置守卫
// const router = new VueRouter({ ... })
// router.beforeEach((to, from, next) => {
// // ...
// })
router.beforeEach(function(to, from, next) {
if (to.meta.needLogin) {
//页面是否登录
if (store.getters.token) {
next()
} else {
// next可以传递一个路由对象作为参数,表示需要跳转到的页面
next({
name: 'login',
query: { redirect: to.fullPath }
})
}
} else {
// 表示不需要登录
next()
}
});