Vue Router 动态设置 Meta

Question

所以我有一个使用 Vue 和 Vue Router 的 SPA。它的设置类似于 iOS 应用程序，当您更深入地单击视图时，导航栏中的标题会发生变化。现在我在 routes.js 文件中硬编码了这个，但想让它动态化。我可以在我的视图中更新路由元数据，但是在视图显示之后呈现，所以我需要它在路由更改之前发生。这是设置：

路由.js

 //A route
 {
      path: '/team/:username',
      component: require('./views/team-single'),
      name: 'profile',
      meta:{ requiresAuth: true, title: 'Team Member', tabbar: false }
  }

导航栏.vue

 //if the route has a title show that not the logo
 <div class="navbar-item">

     <transition name="fadeup">
         <h1 v-if="$route.meta.title" class="navbar-title">{{ $route.meta.title }}</h1>
         <img src="/img/hopbak-green.svg" class="navbar-logo"  alt="hopbak" v-else>
     </transition>

 </div>

所以理想情况下，将 :username 传递到 route.js 中的标题会很好，但我认为那是不可能的。我试过将这样的东西添加到视图中，但就像我说的那样，它被调用得太晚了：

团队成员.vue

 mounted(){
   this.$route.meta.title = this.user.username
}

这确实会改变它，但不会在导航栏已经加载之前改变。

原文由 Packy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在元数据中遇到了动态 url 参数的类似问题，我通过评估 this.$route 的元属性作为函数来解决它。先这样配置meta属性：

 //A route
 {
      path: '/team/:username',
      component: require('./views/team-single'),
      name: 'profile',
      meta: (route) => ({ requiresAuth: true, title: 'Team Member' + route.params.username, tabbar: false })
  }

然后你可以通过这种方式在你的模板中使用它：

 //if the route has a title show that not the logo
 <div class="navbar-item">

     <transition name="fadeup">
         <h1 v-if="$route.meta != null" class="navbar-title">{{ $route.meta($route).title }}</h1>
         <img src="/img/hopbak-green.svg" class="navbar-logo"  alt="hopbak" v-else>
     </transition>

 </div>

原文由 phil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

{
        path: 'xxx/:id(\\d+)',
        component: () => import('@/views/xxx/xxx/xxx'),
        name: 'XxxXxx',
        beforeEnter: (to, from, next) => {
          to.meta.title = 'xxx'+to.params.id;
          next()
        },
        meta: { title: 'xxx', activeMenu: '/xxx' }
      }

在beforeEnter里修改meta.title就好