Vue項目如何動態設置路由meta信息中的title屬性值

場景：編輯、新建頁面配置為同一個路由信息，期望不同頁面的文檔title展示不一樣。

目前的配置如下，不能實現需求。

 因此，我們需要動態的去設置meta的值。思路：借助Vue Router的路由獨享守衛 beforeEnter 和 全局解析守衛 beforeResolve 或全局后置鈎子 afterEach 實現。

 修改代碼如下：

1. 具體路由對象配置

{
    path: 'template-operation/:id?/edit',
    beforeEnter: (to, from, next) => {
      if (to.params.id) {
        to.meta.title = '編輯模板作業'
      } else {
        to.meta.title = '新建模板作業'
      }
      next()
    },
    name: 'file-upload/template-operation/edit',
    component: TemplateEdit
  },

2.全局路由鈎子配置

// 全局解析守衛
router.beforeResolve((to, from, next) => {
  window.document.title = to.meta.title
  next()
})

問題優雅的解決了。。。

參考：https://router.vuejs.org/zh/guide/