vue动态修改header标题

vue动态修改header标题步骤如下。

1、结合业务直接在vue生命周期函数created和mounted中，给document.title赋值。

2、项目中使用了vuerouter，在路由文件index.js中给需要的路由添加title，在路由的beforeeach拦截器里处理。

通常默认情况下,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

---