路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。
对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。
在一个网站中，访问除了登录以外的接口往往都需要验证用户的个人信息，由于后台的登录信息在一定的时间后会失效，这个时候我们在跳转页面的时候再访问别的接口的时候，由于没有登录信息可能导致接口报错。一般我们会在vue组件的beforeCreate周期中写一个验证登录信息接口，以验证用户信息是否失效。
事实上上面的操作并没有什么软用，之前在vue生命周期和异步加载的关系一文中就指出了异步操作是独立于生命周期之外的操作，因此vue并不会乖乖的先执行完beforeCreate周期中的异步操作，验证了信息后再执行下一周期，而是先执行完整个生命周期再执行异步操作，这样的做法会导致，vue实例在渲染dom的时候由于大量数据得不到，渲染出一个很丑的页面，直到验证登陆信息接口访问完毕，才能返回登录页。不仅如此，由于异步操作的执行时间不定，还可能出现大量的页面报错，总之，这么做可以，但体验很差。
vue-router提供了导航守卫，帮助我们解决一些在组件加载之前，可以做一些操作，尤其是异步操作，这样可以避免组件加载完毕后，却没有数据的尴尬。当然，你不应该在组件加载之前做太多的异步操作，这样会导致页面的白屏时间过长，用户体验也很差，所以，须慎用导航守卫。
下面写一个例子：
列举需要判断登录状态的“路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面LoginPage；
当直接进入登录页面LoginPage时，如果“已登录状态”，则跳转到首页HomePage；
import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/', // 默认进入路由
redirect: '/home' //重定向
},
{
path: '/login',
name: 'login',
component: LoginPage
},
{
path: '/home',
name: 'home',
component: HomePage
},
{
path: '/good-list',
name: 'good-list',
component: GoodsListPage
},
{
path: '/good-detail',
name: 'good-detail',
component: GoodsDetailPage
},
{
path: '/cart',
name: 'cart',
component: CartPage
},
{
path: '/profile',
name: 'profile',
component: ProfilePage
},
{
path: '**', // 错误路由
redirect: '/home' //重定向
},
]
});
// 全局路由守卫
router.beforeEach((to, from, next) => {
console.log('navigation-guards');
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
let isLogin = global.isLogin; // 是否登录
// 未登录状态；当路由到nextRoute指定页时，跳转至login
if (nextRoute.indexOf(to.name) >= 0) {
if (!isLogin) {
console.log('what fuck');
router.push({ name: 'login' })
}
}
// 已登录状态；当路由到login时，跳转至home
if (to.name === 'login') {
if (isLogin) {
router.push({ name: 'home' });
}
}
next();
});
export default router;
这是Vue官方文档中对导航守卫的定义
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
分别写了一下5种守卫：
- 全局前置守卫
- 全局解析守卫
- 全局后置钩子
- 路由独享的守卫
- 组件内的守卫
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
