时间戳

首页 > 解决方案 > 我可以直接将命名路由的标签传递给?

vuejs2 - 我可以直接将命名路由的标签传递给?

问题描述

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

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

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

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

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

标签： vuejs2vue-router

解决方案

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

  • 在router.js（或/router/index.js在我的情况下）声明带有原始问题中所示标签的路线。并导出路由和路由器对象。
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>

推荐阅读