ITPub博客

首页 > 应用开发 > IT综合 > 千锋长沙前端培训:VUE-router导航守卫讲解

千锋长沙前端培训:VUE-router导航守卫讲解

原创 IT综合 作者:千锋云计算 时间:2021-11-22 18:01:48 0 删除 编辑

      这篇文章千锋 说说VUE-router导航守卫。首先要知道vue-router有哪几种导航守卫?其实就三种: 全局守卫、 路由独享守卫、 路由组件内的守卫。

u=4248538567,3012407339&fm=26&fmt=auto.webp

1.全局守卫

vue-router全局有三个守卫:

router.beforeEach 全局前置守卫 进入路由之前

router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

router.afterEach 全局后置钩子 进入路由之后

使用方法:

// main.js 入口文件

import router from './router'; // 引入路由

router.beforeEach((to, from, next) => {

next();

});

router.beforeResolve((to, from, next) => {

next();

});

router.afterEach((to, from) => {

console.log('afterEach 全局后置钩子');

});

2.路由独享守卫

如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫:

const router = new VueRouter({

routes: [

{

path: '/foo',

component: Foo,

beforeEnter: (to, from, next) => {

// 参数用法什么的都一样,调用顺序在全局前置守卫后面,所以不会被全局守卫覆盖

// ...

}

}

]

})

3.路由组件内的守卫

beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例 this,组件实例还没被创建。

beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 this。

beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用,可以访问组件实例 this。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69916964/viewspace-2843523/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-18

  • 博文量
    933
  • 访问量
    506069