Vue Router 动态设置 Meta

Question

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

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 中的标题中，但我认为这是不可能的。我曾尝试将这样的内容添加到视图中，但就像我说的那样，它被调用得很晚：

团队成员.vue

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

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

Answer 1

// 文字字符串路径 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 userId = '123' router.push({ name: 'user', params: { userId } }) // -> /user/123 router.push({ path: /user/${userId} }) // -> /user/123 // 这将不起作用 router.push({ path: '/user', params: { userId } }) // -> /user

Answer 2

设置元后，我强制路由器重新加载如下：

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

// Add a temporary query parameter.
this.$router.replace({query: {temp: Date.now()}})
// Remove the temporary query parameter.
this.$router.replace({query: {temp: undefined}})

在此 GitHub issue 中找到了许多强制重新加载路由器的解决方法。这只是其中之一。

Answer 3

元数据中的动态 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>

Answer 4

您可以使用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