I have successfully implemented a dynamic sidebar navigation list using router-link.
<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>
Each router-link acts as a map.
However, I now need to incorporate <router-link> elsewhere in my application, requiring me to register a new view (map) in router.js. The issue is that I do not want this new view to appear in the sidebar list automatically due to my current code structure. I attempted to separate the routes into different files - one for the sidebar list and another for the remaining views - and then import them into router.js, but was unsuccessful. I am unsure how to call them separately. As a newcomer to vue and vue-router, I seek guidance on whether it is possible to achieve what I am aiming for.