Vue-router：环遍路由以动态创建<router-link>

Question

我想使用v-for在我的routes上循环，以便在template部分中动态生成<router-link>。

目前，我不知道如何在jvds-navigation.vue组件的template部分中寻址router参数，该参数在main.js中定义。

以下是脚本，我添加了注释，我的问题发生在哪里：

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
// Import the routes file
import { routes } from './router/routes.js'
// Router
Vue.use(VueRouter)
const router = new VueRouter({
routes,
base: __dirname,
mode: 'history'
})
new Vue({
router, // short for "router: router"
render: h => h(App),
}).$mount('#app')

App.vue

<template>
<span id="app" class="o-root">
<jvds-navigation class="..."></jvds-navigation>
<router-view></router-view>
</span>
</template>
<script>
import JvdsNavigation from "@/components/layout/jvds-navigation.vue"
export default {
name: "App",
components: {
JvdsNavigation
}
};
</script>

jvds导航.vue

<template>
<div>
<div class="[...]">
<!-- 
`nav` should have a `v-for` over the routes imported 
in main.js (example given, but wrong). 
But how can I address routes here?
-->
<nav class="[...]" v-for="routeItem in routes">
<!-- These should be created dynamically... -->
<router-link to="/about">
<a>About</a>
</router-link>
<router-link to="/cv">
<a>CV</a>
</router-link>
<router-link to="/contact">
<a>Contact</a>
</router-link>
</nav>
</div>
</div>
<script>
// How do I get `routes` (imported in main.js) recognized by
// this component in order to be able to loop over it in the
// `template` section?
export default {
name: "jvds-navigation"
};
</script>

感谢您提供的任何提示、技巧和提示！

Answer 1

在router-link上使用v-for。我已经用this.$router.options.routes获取了所有路线。您也可以将其作为道具传递给jvds-navigation。

这是你如何做到这一点的一个小例子：

示例路线

const routes = [
{
path: '/',
component: Home,
name: 'Home',
},
{
path: '/about',
component: About,
name: 'About'
},
];

模板

<nav>
<router-link v-for="route in routes" :key="route.path" :to="route.path">
{{route.name}}
</router-link>
</nav>

脚本

export default {
name: 'Navigation',
data() {
return {
routes: this.$router.options.routes
};
}
// or use computed
// computed: {
//   routes() {
//     return this.$router.options.routes;
//   }
// }
}