本文共 1346 字，大约阅读时间需要 4 分钟。

Vue Router 路由守卫详解

全局路由守卫

前置钩子 (beforeEach)

router.beforeEach((to, from, next) => {  // 可以在这里执行全局级的导航前置操作  next();});

解析守卫 (beforeResolve)

router.beforeResolve((to, from, next) => {  // 可以在这里执行全局级的路由解析守卫  next();});

后置钩子 (afterEach)

router.afterEach((to, from) => {  // 可以在这里执行全局级的导航后置操作});

路由独享的守卫

单独路由的前置钩子

const router = new VueRouter({  routes: [    {      path: '/foo',      component: Foo,      beforeEnter: (to, from, next) => {        // 可以在这里执行单独路由的导航前置操作        next();      }    }  ]});

组件内的守卫

进入守卫 (beforeRouteEnter)

beforeRouteEnter(to, from, next) {  // 在渲染该组件的对应路由被确认前调用  // 不能直接使用 `this`，因为组件实例还未创建  next();};

更新守卫 (beforeRouteUpdate)

beforeRouteUpdate(to, from, next) {  // 当前路由改变但组件被复用时调用  // 可以访问组件实例 `this`  next();};

离开守卫 (beforeRouteLeave)

beforeRouteLeave(to, from, next) {  // 导航离开该组件的对应路由时调用  // 可以访问组件实例 `this`  next();};

导航守卫的执行顺序

无导航切换的情况

有导航切换的情况

导航解析流程

转载地址：http://jyxwz.baihongyu.com/