Vue Router组件如何实现长尾词搜索的高级应用？

本文共计1135个文字，预计阅读时间需要5分钟。

1. 动态设置页面 + 页面由 title/title 控制，由于 SPA 只有一个 HTML，所以切换到不同页面时，不会自动变化。需要通过 JavaScript 来修改 title/title 中的内容。

1 动态设置页面标题

页面标题是由 <title></title> 来控制的，因为 SPA 只有一个 HTML，所以当切换到不同的页面时，标题是不会发生变化的。必须通过 JavaScript 来修改 <title></title> 中的内容：

window.document.title ='xxx'

有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中，通过 JavaScript 来修改 <title></title> 中的内容。这种方式固然可行，但如果页面很多，就会显著增加维护成本，而且修改逻辑都是一样的。有没有更好的方法呢？

我们可以利用 vue-router 组件的导航钩子 beforeEach 函数，在路由发生变化时，统一设置。