聊聊Vue 中 title 的动态修改问题

 由于之前的 Vue 项目打包成果物一直是嵌入集成平台中，所以一直没有关注过项目的 title。直到最近，突然有个需求，要求点击按钮在集成平台外新开一个页面，此时我才发现，原来我的项目的 title 一直是万年不变的 vue-project。理所应当的，这个问题被测试爸爸提了一个大大的缺陷。

犯了错的我赶紧解决这个问题，但是经过一段时间的摸索，我却发现，这一个小小的问题，却有着很多不同的解法。

首先，毫无疑问的是，我们应该使用 document.title 方法通过 DOM 操作来修改 title 的值。此时，距离解决问题还差两步：

1.如何传递 title？
2.何时修改 title？

ps：很多人提到过在微信或者一部分 IOS webview （下文一律以微信指代）中无法通过 document.title 方法修改 title 的值，这个问题的解决方案在文末的彩蛋中会提及。

title 的传递

接下来进入第一个重点：title 的传递。根据传递 title 值的方式，分为两种方案：

1.全局变量传递
2.路由传递

何为全局变量传递？全局变量传递指的是所有页面维护同一个全局变量，切换页面对其重新赋值，最常见的方法是使用 Vuex，当然，如果你要使用 this.$root 甚至丧心病狂地想要使用 provide/inject 一样可以达到类似的效果。

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

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

// router.jsconst 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 秒以上才成功修改。通过这个延迟可以发现，显然，我们的代码执行地太晚了！

回忆了一下 Vue 源码中初始化相关的代码细节，我们可以发现，我们甚至在 beforeCreate 钩子中就可以进行 title 的修改。

改动后的代码如下：