Vue-router：我不想使用所有路由來動態創建循環<router-link>

Question

我使用路由器鏈接動態創建了側邊欄導航列表。

<template>
<div class="sidebarListItem bg-light">
    <router-link
       v-for="route in $router.options.routes"
       :key="route.path" 
       :to="route.path"
       class="list-group-item list-group-item-action bg-light">
       {{route.title}} 
    </router-link>
</div>
</template>

<script>
export default {
   name: "PageSidebarList",
   computed: {
            routes(){
                return this.$router.options.routes
                }
            },  
}          
</script>

每個路由器鏈接是一個映射。 但是，我需要在我的應用程序的其他地方使用<router-link> ，所以我需要在 router.js 中注冊新視圖（地圖）。 問題是我不希望這個視圖出現在側邊欄列表中，因為我的代碼，它是自動的。 我試圖在不同的文件中分離路由（我需要一個列表和其余的視圖），然后將它們導入到 router.js 中。 但它仍然不起作用。 或者我不知道如何分別稱呼它們。 我是 vue 和 vue-router 的新手，所以請幫忙。 可以做我想做的嗎？

Answer 1

可以向每個路由添加自定義元數據：

{
      path: '/foo',
      component: Foo,
      meta: { hideInNav: true }
}

然后你可以在路由器鏈接上使用 v-if v-if="!route.meta.hideInNav"