[Vue3] vue-router路由守卫进阶

news/2024/7/17 4:38:05

路由守卫,可以想象为古代御前侍卫,路由守卫,则是对路由进行权限控制

分类:全局守卫、独享守卫、组件内守卫

文章目录

      • 1.全局前置-路由守卫
      • 2.全局后置守卫
      • 3.独享守卫
      • 4.组件内路由守卫
      • 5.keep-alive遇见vue-router
      • 6.路由器的两种工作模式,history模式与hash模式

1.全局前置-路由守卫

作用:主要用来鉴权
用户点击导航区,随后引起路径的改变,前端路由器监测到,进行规则的匹配,在合适的位置呈现组件。

调用时机:初始化时被调用,每次路由切换之前调用

写法:

router.beforeEach((to, from, next) => {// 判断当前路由是否需要进行权限控制if (to.meta.isAuth) {// 权限控制规则if (localStorage.getItem('token')) {next() // 放行}} else if (to.path == '/home') {next()} else {console.log('暂无权限')}
})

to:即将要进入的目标路由对象
from:当前导航即将要离开的路由对象
next:调用该方法后,才能进入下一个钩子

2.全局后置守卫

主要作用:变更页签标题
调用时机:初始化被调用,每次路由切换之后调用

router.afterEach((to, from) => {document.title = to.meta.title
})

可以在钩子当中定义一些标题,利用meta来定义

const routes = [{path:'/index',component:Home,meta:{title:"首页"}},{path:"/about",component:About,meta:{title:"关于"}}
]
// 利用导航守卫。修改我们的标题
router.afterEach((to, from) => {document.title = to.meta.title
})

3.独享守卫

对某一个路由单独进行控制的守卫


const routes = [{path: "/system",name: "System",component: () => import(/* webpackChunkName: "system" */ "@/views/System"),beforeEnter: (to, from, next) => {if(to.meta.isAuth) {if(localStorage.getItem("token")){next()}} else {console.log("暂无权限");}}},
]

4.组件内路由守卫

beforeRouteEnter、beforeRouteLeave

调用时机:通过路由规则,beforeRouteEnter进入该组件时被调用,beforeRouteLeave离开该组件时被调用

// 进入守卫,通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from,next){},
// 进入守卫,通过路由规则,离开该组件时被调用
beforeRouteLeave(to,from,next){}

5.keep-alive遇见vue-router

keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态或避免重新渲染

  • include:字符串或正则表达,只有匹配的组件会被缓存
  • exclude:字符串或正则表达式,匹配的组件都不会被缓存

router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配的视图组件都会被缓存

<keep-alive><router-view>// 所有路径匹配到的视图组件会被缓存</router-view>
</keep-alive>

6.路由器的两种工作模式,history模式与hash模式

hash模式:

  1. 地址永远带着#号,不美观

  2. 如果以后将地址通过第三方手机app分享,app校验严格,则地址会被标记为不合法

  3. 兼容性好。

history模式:

  1. 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

  2. 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id

  3. 不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。

  4. 地址干净,美观

  5. 兼容性和hash模式相比略差,IE9不兼容(可使用强制刷新处理)

  6. 应用部署上线时,需要后端人员支持,解决刷新页面服务端404问题。

const router = new VueRouter({routes,mode:'history'
})

https://www.xjx100.cn/news/3092598.html

相关文章

转录组学习第四弹-数据质控

数据质控 将SRR转为fastq之后&#xff0c;我们需要对fastq进行质量检查&#xff0c;排除质量不好的数据 1.质量检查&#xff0c;生成报告文件 ls *fastq.gz|while read id;do fastqc $id;done并行处理 ls *fastq.gz|xargs fastqc -t 102.生成 html 报告文件和对应的 zip 压缩…

hotspot虚拟机编译环境

关于Hotspot虚拟机的编译环境及其配置。Hotspot虚拟机是一个基于Java的虚拟机&#xff0c;它具有高效、灵活和可扩展性等优点。为了能够正确地编译和运行Java程序&#xff0c;我们需要配置一个合适的编译环境。在本次分享中&#xff0c;作者将介绍如何配置Hotspot虚拟机的编译环…

使用 ClickHouse 做日志分析

原作&#xff1a;Monika Singh & Pradeep Chhetri 这是我们在 Monitorama 2022 上发表的演讲的改编稿。您可以在此处找到包含演讲者笔记的幻灯片和此处的视频。 当 Cloudflare 的请求抛出错误时&#xff0c;信息会记录在我们的 requests_error 管道中。错误日志用于帮助解…

算法分析与设计课后练习23

求下面的0-1背包问题 &#xff08;1&#xff09;N5,M12,(p1,p2,…,p5)(10,15,6,8,4),(w1,w2,…,w5)(4,6,3,4,2) &#xff08;2&#xff09;N5,M15,(p1,p2,…,p5)(w1,w2,…,w5)(4,4,5,8,9)

前端工程化-什么是构建工具

了解构建工具之前&#xff0c;我们首先要知道的是浏览器只认识html、css、js&#xff0c;而我们开发时用的vue&#xff0c;react框架都只是为了方便我们开发而使用的工具 使用构建工具的原因 vue或react的企业级项目里都会具备这些功能&#xff1a; 1.使用typescript语言&…

反序列化漏洞介绍

反序列化漏洞 序列化和反序列化本身不存在漏洞&#xff0c;之所以会有反序列化漏洞&#xff0c;是因为开发者在编写时&#xff0c;加入了一些恶意的代码 PHP反序列化漏洞是一种安全漏洞&#xff0c;它允许攻击者利用未经验证的用户输入来执行恶意代码。这种漏洞通常出现在PHP…

功能测试进阶建议,学习思路讲解

1. 深入了解测试理论&#xff1a; 了解测试的原理、方法和最佳实践&#xff0c;包括黑盒测试、白盒测试、灰盒测试等。可以阅读相关的书籍或参加在线课程。 2. 学习相关测试工具&#xff1a; 掌握常用的测试工具&#xff0c;如缺陷发现工具、性能测试工具、安全测试工具等。可以…