Vue 组件修改网页标题

[Dream4ever]

需求描述

在部分业务中，网页的标题是在页面获取到用户当前请求的 URL 后动态生成的。

而在 Vue 的组件化开发中，自己最开始不知道如何在组件或路由中动态更改页面的标题，于是在 vue-cli 项目的 index.html 中用原生 JS 修改页面标题。带来的一个问题就是用户会感知到标题的变化。

既然存在这个问题，就需要研究一下如何在 vue-cli 项目中，展示页面之前就动态修改标题，让用户感知不到这个变化。

方案调研

调研过程

先 Google 关键字： vue set html title before，搜索结果页的第一个链接 how to change document.title in vue-router? #914 就是 vue-router 项目中关于这个需求的讨论，值得好好研究研究。

第二个链接 How can I bind the html <title> content in vuejs?
也给出了建议使用的组件 vue-headful。

知道了这个组件之后，又用 vue head vue document vue title 作为关键字在 GitHub 上搜索，找到了 Star 数更高的组件 vue-head。

入选方案

• vue-headful
• vue-head

应用过程

要点总结