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"