有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

全局路由守卫(vue 路由守卫)

vue 炮渣日记 2周前 (11-19) 9次浏览 已收录 0个评论 扫描二维码

参考官网:
https://router.vuejs.org/zh/guide

  • 路由守卫种类:三大全局路由守卫,三大组件路由守卫,一个路由独享守卫
  • 使用位置:全局和独享在路由文件 src\router\index.js,组件守卫在组件中
  • 相关参数
    to :要跳转到的目标路由信息from:跳转前的路由信息next():不传参执行下一步,传false阻断程序执行,传 { path: ‘路径’ } 或者 { name: “Login” } 跳转到目标路由

1. 三大全局路由守卫

全局守卫使用前需要修改下路由文件,否则就得拿到 main.js 中配置全局守卫
使用全局守卫必须获取路由实例化对象

const routes = []  // 路由对象在此配置
const router = new Router({
  routes
});

/******** 在此区域配置路由全局守卫 **********/

export default router;

全局路由守卫先执行,组件生命周期后执行
使用位置:路由文件 src\router\index.js

// 全局前置守卫
// 在页面加载之前执行,在所有守卫和生命周期之前执行,优先级第一
// 不使用 next()方法 会阻断程序
router.beforeEach((to, from, next) => {
  console.log("beforeEach", to, from);

  to.meta.requireAuth = false;
   //判断该路由是否需要登录权限
  if (to.meta.requireAuth) {
    if (cookies("token")) {
      next();
    } else {
      next({
        path: "/login",
        query: { redirect: to.fullPath } 
        // 保存要跳转的目标路由,登录成功后跳转到该路由
      });
    }
  } else {
    next();
  }
});

// 全局解析守卫
// 在beforeEach之后执行
// 不使用 next()方法 会阻断程序
router.beforeResolve((to, from, next) => {
  console.log("beforeResolve", to, from);
  next();
});

// 全局后置守卫
// 在beforeResolve之后执行
// 没有next()
router.afterEach((to, from) => {
  console.log("afterEach", to, from);
});

2. 一大路由独享守卫

使用位置:路由文件 src\router\index.js 路由对象中

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        console.log("beforeEnter", to, from);
        next()
      }
    }
  ]

3. 三大组件内守卫

在组件中使用

// 进入组件时执行
// 不!能!获取组件实例 `this`
beforeRouteEnter (to, from, next) {
  console.log("beforeRouteEnter ", to, from);
  next();
},
// 在当前路由改变,但是该组件被复用时调用
// 可以访问组件实例 `this`
beforeRouteUpdate (to, from, next) {
  console.log("beforeRouteUpdate ", to, from);
  next();
},
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
beforeRouteLeave (to, from, next) {
  console.log("beforeRouteLeave ", to, from);
  next();
},

4. 路由守卫执行的先后顺序

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址