获取vue项目中所有路线的列表，并生成站点地图-vue项目

Question

假设我创建了一个路由为：router.js:

import Vue from "vue";
import Router from " vue-router";
import BookRoutes from "./routes/book";
Vue.use(Router)
const router = new Router({
routes:[
{
path: "/book",
name: "book",
component:{
render(c) {
return c("router-view")
}
},
childern: BookRoutes
}
]
})

路线->书->index.js

const BookProfile = () => 
import (/* webpackChunkNames: "BookProfile" */ "@/components/profile/book/BookProfile")
import BookRoutes from "./Book";
export default [{path: 
"book/:bookId",
"name": "profile.book",
redirect: {name: "profile.book.fee"},
component: BookProfile,
children: BookRoutes

}]

Book.Js:

const BookFee = () => import (/* webpackChunkName: "BookProfilr" */)
export default:[{
path: "book-fee",
name: "profile.book.fee",
component: BookFee
}]

以同样的方式创建了几乎所有的路线列表，如何获得所有路线的列表，如果可能的话，填写id，如果不是在vue项目中创建的所有路线列表。

如果有人需要任何进一步的信息，请告诉我。

Answer 1

<template>
<ul>
<li v-for="(item, key) in items" :key="key">
<router-link :to="item.name">{{item.name}}</router-link>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: []
}
},
created() {
this.$router.options.routes.forEach(route => {
this.items.push({
name: route.name,
path: route.path
})
})
}
}
</script>

Answer 2

您可以在任何子组件中使用路由器实例的getRoutes方法，如：

mounted(){
let routes = this.$router.getRoutes()
}