vue的tab页面title显示问题(title值设置及一闪而过)

Posted 2023-05-01

参考技术A 通常默认情况下,vue-cli脚手架自动生成的项目中,页面title取的是 package.json 中的 name 值:

但是!!!
如果我们的项目是一个由vue-router模拟的多页面项目,每个页面都需要设置自己不同的 title 时,该怎么办呢?
这时候,我们就要拿出路由中的导航卫士功能:
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB

我们可以使用 router.beforeEach 注册一个全局前置守卫：

这样当访问路由,如果路由有设置 title ,则显示其值,否则显示 else 中设置的默认值,就酱!

https://www.cnblogs.com/karthuslorin/p/11000431.html

Vue 设置每个页面的头部对应 title

参考技术A

Vue 单应用在入口 index.html 文件中设置一次页面的 title ，之后每个页面都会显示同一个 title ，现在需要每个页面有不同的 title 如何实现呢？
只需两步搞定：

搞定，超级简单，赶快试试吧~~ _{记得点赞哦} ~~