Vue 中 title 的动态修改

使用 document.title 方法通过 DOM 操作来修改 title 的值

title 的传递（路由传递）

路由传递的方法，即通过路由跳转传参传递 title 的值。由于业务逻辑中本身就包含大量的路由传参，为了解耦方便后续维护，推荐将 title 的值通过路由配置中的 meta 进行传递。

之后，通过访问当前路由对象（$route）的 meta 属性即可获取到 title 值。

// router.js
const routes = [
  {
    path: '/',
    ...
    meta: {
      title: '首页'
    }
  }, {
    path: '/A',
    meta: {
      title: 'A模块'
    }
  }
]

// 业务模块，获取 title
...
beforeCreate () {
  console.log(this.$route.meta)
}
...

通过上面的两种方法，可以顺利传递 title 的值。

title 的修改

完成了 title 值的传递，接下来我们谈谈何时该修改 title。

想到这个问题，大多数人第一个想到的应该就是在生命周期钩子中修改 title。

生命周期钩子

一般情况下，我们在 mounted 生命周期钩子中进行初始化请求，所以惯性思维之下，我在 mounted 中进行了 title 的修改。

// 业务代码
mounted () {
  document.title = this.$route.meta.title
}

结果，效果不佳，标签页的 title 延迟 1 秒以上才成功修改。我们可以在 beforeCreate 钩子中就可以进行 title 的修改。

改动后的代码如下：

// 业务代码
beforeCreate () {
  document.title = this.$route.meta.title
}

可以发现，修改后的代码效果明显好了许多，延迟感虽然还有，但是已经不太明显。

路由守卫

比起在生命周期钩子中修改 title 值，在路由跳转时利用路由守卫完成 title 的修改，岂不美哉？毕竟路由跳转发生在生命周期函数执行之前，使用路由守卫修改 title 值可以明显降低 title 修改的延时。

// router.js
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

此时，我们基本完美完成了功能需求，但是，还是有一点小瑕疵——如果 meta 中没有定义 title 值，此时 title 值就变成了 undefined，所以，我们需要设置默认的 title 值（一般可以是该项目的名称）。修改后的代码如下：

// router.js
const defaultTitle = '默认 title'
router.beforeEach((to, from, next) => {
  document.title = to.meta.title ? to.meta.title : defaultTitle
  next()
})

到这里为止，我们完美实现了需求，并且实现了该功能与业务代码的解耦。