vue-全局导航守卫
现在有个需求是,路由间进行切换时,顺便把页面的标题也修改了;比如说当前A路由,那标题是A;切换到B路由,那标题变成B,以此类推。
很多人的做法是这样的,在每个路由的created()写代码,直接document.title="A"/"B"/"C"不就可以了吗?那这样是不是太麻烦了,每个路由都要去加这么个代码。(顺便在普及下:created是组件刚被创建后可以回调的方法,mounted是组件的template挂载到DOM上面后回调的方法,updated是当template模板中内容发生改变时会调用的函数)
因此全局导航守卫能够帮助我们解决上面的问题,只要路由发生的跳转了,守卫就箭头到,并执行相应的处理,要实现这个守卫,只需要在route/index.js重写router的一个方法即可,如下:
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) //是这个方法;在路由跳转前,会调用该方法 router.beforeEach((to,from,next) => { //to是跳转后的路由对象,from跳转前的路由对象,next是执行下一个方法,记住next一定要写,不写的话整个流程跑不通了,我们的代码在next()之前 document.title = to.matched[0].meta.title next() })
可能很萌B的是调 to路由对象的matched[0].meta.title是什么东西啊?首先每个路由呢是可以自定义数据的,通过一个meta属性来定义,你就可以理解成通过meta属性来自定义路由的某些数据,如下:
const routes = [ { path: '/', name: 'portal', redirect: '/home', meta: { title: 'protal' } } ]
上面的我就搞了元数据title,方便其他比如路由跳转时可获取,但大家很纳闷,直接to.meta.title不就可以了嘛?搞个matched[0]是什么东西?
首先 to.meta.title也是可以的没毛病,但如果是 to路由是子路由,子路由里没有定义meta,而他的父路由有meta,这时候是不是就拿不到数据啦?这么说吧,to.matched是拿到一个数组,这个数组里包含父路由对象以及子路由对象,而父路由对象是被放在第一个位置,即 [0],这样的话,不管to是不是父、子路由,通通取 父路由的meta
刚才的beforeEach,是被叫做全局的前置导航守卫,还有一个是afterEach,是后置的全局守卫,当路由跳转完毕后会执行的方法。
router.afterEach( (to,from) => {
})
除了全局守卫,还有路由独享守卫和 组件守卫,可以查看vue的官网来学习。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
2020-04-01 JavaSE-IO概述