耀极客论坛

 找回密码
 立即注册
查看: 512|回复: 0

Vue router 路由守卫详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 01:15:01 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了Vue router 路由守卫,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

一、全局前置beforeEach
  当 Local Storage 里面存储的 name 是 zhangsan 的时候, 点击消息才显示消息内容


1. 全局前置beforeEach
  1. 给router添加一个路由守卫 beforeEach
复制代码
  语法 :
  1. router.beforeEach((to, from, next)=>{})
复制代码
  1. 作用 : 初始化的时候 和 在每一次路由切换之前调用beforeEach里面的函数
复制代码
  1. 参数 :
  2. 1.to : 目标路由
  3. 2.from : 跳转前的路由
  4. 3.next : 放行
复制代码
2. 实现


二、需求二
  如果有很多个路径都需要做出判断以后才跳转, 就需要写很多判断的代码, 判断结构就会很复杂
  这时需要判断的路由里面就可以放一个meta标签

  meta标签提供关于HTML文档的元数据 (元数据指用来描述数据的数据)

  这时就可以使用meta里面的标记字段进行判断



三、全局后置守卫 afterEach
  afterEach 和 beforeEach 使用方法基本一致.

  区别就是afterEach没有next这个参数

1. 修改title为自己的title
  给每个路由指定自己的title名称
  1. const router = new VueRouter({
  2.   routes: [
  3.     {
  4.       name: 'home',
  5.       path: '/home',
  6.       component: Home,
  7.       meta: {
  8.         title: "首页"
  9.       },
  10.       children: [
  11.         {
  12.           name: "xiaoxi",
  13.           path: 'message',
  14.           component: Message,
  15.           meta: {
  16.             title: "消息"
  17.           },
  18.           children: [
  19.             {
  20.               name: 'xiangqing',
  21.               path: 'detail',
  22.               component: Detail,
  23.               meta: {
  24.                 isAuth: true,
  25.                 title: "消息详情"
  26.               }
  27.             }
  28.           ]
  29.         }
  30.       ]
  31.     },
  32.     {
  33.       path: '/about',
  34.       component: About,
  35.       meta: {
  36.         title: "关于"
  37.       }
  38.     }
  39.   ]
  40. })
复制代码
  在 beforEach里面修改title名
  1. router.afterEach((to, from) => {
  2.   document.title = to.meta.title || "测试"
  3. })
复制代码
四、组件内守卫

1. beforeRouteEnter
  通过路由规则, 进入该组件时被调用

2. beforeRouteLeave
  通过路由规则, 离开该组件时被调用

总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:07 , Processed in 0.070691 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表