如何编写Vue Router组件的高级应用实例代码示例？

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

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

1 动态设置页面标题

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

window.document.title ='xxx'

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

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