我可以直接将命名路由的标签传递给 <router-link> 吗？答案

【问题标题】：Can I directly pass a label for a named route to<router-link>?我可以直接将命名路由的标签传递给 <router-link> 吗？
【发布时间】：2021-11-30 05:29:40
【问题描述】：

在我的router.js 中说我有这样的事情：

const routes = [
  {
    path: '/',
    name: 'home',
    label: 'Start',
    component: Home
  }
]

然后在我渲染我的路由器链接的地方，我希望能够使用上面声明的备用标签属性，而不是手动输入它，并避免在其他地方定义它。我尝试了下面的一点，但它不起作用（虽然它适用于“路径”属性）

<router-link :to="{name: 'home'}">{{ this.$router.label }}</router-link>

编辑：我发现（显然！）this.$router 指的是当前的活动路线。

【问题讨论】：

标签： vuejs2 vue-router

【解决方案1】：

至少现在，这是我的解决方案：

在router.js（或在我的情况下为/router/index.js）声明带有原始问题中所示标签的路线。并导出 both 路由和路由器对象。

const routes = [
  {
    path: '/',
    name: 'home',
    label: 'Start',
    component: Home
  }
  ...
] 

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export { router as default, routes };

在main.js 中导入两个变量并存储routes，以便您可以在任何地方检索它们。

import router, { routes } from '@/router'
Vue.prototype.routes = routes

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

您想在哪里“渲染”路线链接（在我的例子中是导航栏布局），请执行以下操作（在此处使用 vuetify）：

  <v-app-bar app color="secondary" dark>        
     <v-btn v-for="route in routes" :to="{name: route.name}" key='route.name' text rounded :exact="true">
            {{ route.label }}
     </v-btn>        
  </v-app-bar>

我确信这可以通过使用 Vuex（我仍在研究）来改进。

更新找到了一个更好的解决方案，不需要routes 导出/导入并将其分配给Vue.prototype.routes = routes。只需在要使用带有标签的路由数据的组件中执行此操作即可。模板部分（v-btn 等）保持不变。

<script>
export default {
  name: 'LayoutNav',  
  data() {
    return {      
      routes: this.$router.options.routes
    };
  }
};
</script>

【讨论】：