使用vue-router时如何更改页面标题？

在使用 Vue.js 和 vue-router 开发单页应用时，经常需要根据当前的路由变化来更改页面的标题，以提高用户体验和SEO优化。通常，我们可以在 vue-router 的每个路由钩子或全局导航守卫中处理这个需求。

方法一：使用路由元信息（meta fields）

在定义路由时，可以通过元信息（meta）来指定每个路由的标题，然后在路由钩子中读取并设置页面标题。

javascript
const router = new VueRouter({
  routes: [
    { path: '/', component: Home, meta: { title: '首页' }},
    { path: '/about', component: About, meta: { title: '关于我们' }}
  ]
});

router.beforeEach((to, from, next) => {
  // 从即将进入的路由获取 meta 中的 title 属性
  if (to.meta && to.meta.title) {
      document.title = to.meta.title;
  }
  next();
});

这种方法的好处是直观且集中管理，易于修改和维护。

方法二：在组件内部更改标题

除了在路由配置中设置，还可以在具体的 Vue 组件内部更改标题。这可以通过 Vue 的生命周期钩子来实现，例如在 mounted() 或者 created() 钩子中设置。

javascript
export default {
  name: 'About',
  mounted() {
    document.title = '关于我们';
  }
}

这种方法适用于标题需要动态生成或依赖于组件内部状态的情况。

方法三：创建一个自定义指令

如果你的项目中频繁需要更改标题，可以考虑创建一个自定义 Vue 指令来简化这一过程。

javascript
Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = binding.value;
  }
});

// 使用
<template>
  <div v-title="'首页'"></div>
</template>

这种方法使得在模板中直接定义标题变得非常简单。

小结

为了提高用户体验和进行SEO优化，根据路由变化设置页面标题是一个常见需求。通过 vue-router 的全局导航守卫、组件生命周期钩子或者自定义指令，都可以达到这个目的。在实际项目中可以根据需要选择合适的方法。