Vue 中 title 的动态修改

2024-04-29 22:56:04

使用 document.title 方法通过 DOM 操作来修改 title 的值

title 的传递（路由传递）

路由传递的方法，即通过路由跳转传参传递 title 的值。由于业务逻辑中本身就包含大量的路由传参，为了解耦方便后续维护，推荐将 title 的值通过路由配置中的 meta 进行传递。

之后，通过访问当前路由对象（$route）的 meta 属性即可获取到 title 值。

// router.js
const routes = [{path: '/',...meta: {title: '首页'}}, {path: '/A',meta: {title: 'A模块'}}
]

// 业务模块，获取 title
...
beforeCreate () {console.log(this.$route.meta)
}
...

通过上面的两种方法，可以顺利传递 title 的值。

title 的修改

完成了 title 值的传递，接下来我们谈谈何时该修改 title。

想到这个问题，大多数人第一个想到的应该就是在生命周期钩子中修改 title。

生命周期钩子

一般情况下，我们在 mounted 生命周期钩子中进行初始化请求，所以惯性思维之下，我在 mounted 中进行了 title 的修改。

// 业务代码
mounted () {document.title = this.$route.meta.title
}

结果，效果不佳，标签页的 title 延迟 1 秒以上才成功修改。我们可以在 beforeCreate 钩子中就可以进行 title 的修改。

改动后的代码如下：

// 业务代码
beforeCreate () {document.title = this.$route.meta.title
}

可以发现，修改后的代码效果明显好了许多，延迟感虽然还有，但是已经不太明显。

路由守卫

比起在生命周期钩子中修改 title 值，在路由跳转时利用路由守卫完成 title 的修改，岂不美哉？毕竟路由跳转发生在生命周期函数执行之前，使用路由守卫修改 title 值可以明显降低 title 修改的延时。

// router.js
router.beforeEach((to, from, next) => {document.title = to.meta.titlenext()
})

此时，我们基本完美完成了功能需求，但是，还是有一点小瑕疵——如果 meta 中没有定义 title 值，此时 title 值就变成了 undefined，所以，我们需要设置默认的 title 值（一般可以是该项目的名称）。修改后的代码如下：

// router.js
const defaultTitle = '默认 title'
router.beforeEach((to, from, next) => {document.title = to.meta.title ? to.meta.title : defaultTitlenext()
})

到这里为止，我们完美实现了需求，并且实现了该功能与业务代码的解耦。

Vue 中 title 的动态修改相关推荐

SAP QM中阶之动态修改规则创建
SAP QM中阶之动态修改规则创建 1, 执行事务代码QDR1或者如下的菜单路径, 可以用来创建动态修改规则. 点击菜单或者执行事务代码QDR1, 进入如下界面, 输入DMR的code,比如Z01,回 ...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环后台数组格式: 数组( ...
vue中怎么点击修改文字_vue中如何实时修改输入的值
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
vue中根据权限动态的设置路由
本篇文章主要讲的是使用vue的框架 vue-element-admin, 来解决根据不同的角色权限, 显示不同的路由. ⽅式⼀,后台返回⾓⾊树形路由表,前端添加动态路由⽅式⼆,后台返回⽤户⾓⾊,前端 ...
原生JS实现vue中data值的修改与渲染
前言砖搬多了就得想想怎么造砖,Vue使用多了,也得想想Vue是咋实现,Vue用着确实舒服,仔细了解一下,背后做的操作也太多了吧,但是再多的操作也是一个一个积累起来的吧! 先记录一下怎么实现data中 ...
vue中怎么点击修改文字_杭州展馆设计中说明牌和说明文字怎么样才能使用最大化？...
在杭州绝大多数的展馆中,都会放说明牌和说明文字,这样一来可以对展品进行解释说明让展品更有可读性,二来可以节约运用大量高科技手段带来的成本问题.那么,有一个最大的问题出现了杭州展馆设计中说明牌和说明文字 ...
vue中使用require动态获取图片地址
项目场景: 项目中根据图片不同的后缀名,展示不同的图片问题描述直接给图片的src绑定图片地址,图片不显示,使用 require('图片本地路径' + '地址变量' + '.png') 也不显示 & ...
vue中关于el-radio样式修改失效的问题（自定义属性），和实现类似淘宝的码数、款式的选泽按钮
一.遇到的问题按照官网给的方法.使用fill和fill-text,无法成功修改样式.然后看了很多网上的,直接修改样式,我仿照他们写法.也失效了.但我仔细看了看他们的css文件,发现几乎都用了less ...

最新文章

热门文章