Vue Router动态设置Meta

Question

所以我有一个使用Vue和Vue路由器的SPA。它设置为iOS应用程序，当您更深入地查看视图时，导航栏中的标题会发生变化。现在我在routes.js文件中有这个硬编码但是想让它变得dynmaic。我可以在视图中更新路径元，但是在视图显示后渲染，所以我需要在路由更改之前进行。这是设置：

route.js

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

navbar.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中的标题会很好，但我不认为这是可能的。我试过在视图中添加这样的东西，但就像我说它被调用到了晚了：

团队member.vue

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

确实改变了它，但在导航栏已经加载之前没有改变它。

Answer 1

我在元数据中使用动态url参数时也遇到类似的问题，我通过将this.$route的meta属性作为函数进行评估来解决该问题。首先以这种方式配置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>

Answer 2

设置meta之后，我强制重新加载路由器，如下所示：

this.$route.meta.title = this.user.username

// add a temporary variable
this.$router.replace({query: {temp: Date.now()}})
// remove the temporary variable query
this.$router.replace({query: {temp: undefined}}

有许多变通方法强制重新加载此github issue中找到的路由器，这只是其中之一。

Answer 3

您可以使用props来实现这样的目标。

{
  path: '/team/:username',
  name: 'profile',
  component: require('./views/team-single'),
  props: (route) => ({ title: route.params.username })
}

并且，在组件中：

props: ['title'],
...
mounted () {
  console.log('title: ' + this.title)
}
...

结帐文档了解更多信息：https://router.vuejs.org/en/essentials/passing-props.html

Answer 4

//文字字符串路径 router.push('/users/eduardo')

// 带路径的对象 router.push({ path: '/users/eduardo' })

// 带有参数的命名路由，让路由器构建 url router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询，结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } })

// 带有哈希值，结果为 /about#team router.push({ path: '/about', hash: '#team' })

const 用户 ID = '123' router.push({ name: 'user', params: { userId } }) // -> /user/123 router.push({ path: drop1() }) // -> /user/123 // 这将不起作用 router.push({ path: '/user', params: { userId } }) // -> /user