保持 Vue 页面标题与路由器同步的简单方法

我注意到在不少项目中，开发人员忘记了将页面标题与路由器同步更新，或者可能认为他们明天再做，因为这只是一个很小的功能 :)。保持标题与内容同步总是有意义的，原因如下：

帮助用户使用多个选项卡
对于网站分析很重要

我将向您展示如何使用标准vue-router来实现这一点。

步骤 1：在路由器配置中声明路由元数据

首先，让我们向标准路线添加一些额外的元数据：

  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
      meta: {
        auth: true,
        title: 'Dashboard'
      }
    }, {
      path: '/login',
      name: 'login',
      component: LoginPage,
      meta: {
        auth: false,
        title: 'Login'
      }
    }, {
      path: '/buckets',
      name: 'buckets',
      component: BucketsPage,
      meta: { auth: true, title: 'Buckets' }

有关路由器包的更多文档可以在官方 vue 路由器网站上找到。

步骤 2：在 App.vue 中添加 $route 观察器

转到您的 Vue 主 .vue 文件（它应该有一个<router-view></router-view>组件）并添加一个观察者：

    watch: {
      '$route' (to, from) {
        document.title = to.meta.title || 'Your Website'
      }
    },

这会将 title 设置为页面标题（如果你为该路由指定了元字段）。我尝试使用路由器导航保护器实现同样的功能，但$routewatcher 似乎是最简单的解决方案。

看起来很简单，对吧？:) 不妨在路由器元数据中尝试定义更多字段，例如页面描述以及您希望为该页面设置的其他任何内容。然后修改观察器以使用它们。

希望这有帮助！

文章来源：https://dev.to/webhookrelay/a-simple-way-to-keep-your-vue-page-title-in-sync-with-the-router-ec0