如何在vue路由器上做动态路由? [英] How to make dynamic routes on the vue router?
本文介绍了如何在vue路由器上做动态路由?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的 MainNavBar 组件是这样的:
My MainNavBar component like this :
<template>
...
<v-list-item
v-for="(item, index) in listMenu"
:key="index"
@click="goTo(item)"
>
<v-list-item-content>
<v-list-item-title>{{ item }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
...
</template>
<script>
export default {
...
methods: {
goTo(key) {
this.$router.push({ name: key });
},
...mapActions("dataStore", ["getMenu"])
},
computed: {
...mapGetters("dataStore", ["listMenu"])
}
};
</script>
listMenu 取自 API.这是一个菜单列表
listMenu taken from API. It is a menu list
我的路由器配置如下:
import Vue from "vue";
import Router from "vue-router";
import Application from "@/pages/Application"
import MainNavbar from "@/layout/MainNavbar";
...
import { APPLICATION_ROUTE as RouteConfig } from "./route-config";
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: "/menu-first",
name: RouteConfig.APPLICATION_NAME_1.NAME,
components: { default: Application, header: MainNavbar }
},
{
path: "/menu-two",
name: RouteConfig.APPLICATION_NAME_2.NAME,
components: { default: Application, header: MainNavbar }
},
...
]
});
我的 RouterConfig 像这样:
export const APPLICATION_ROUTE = {
APPLICATION_NAME_1: {
NAME: "menu-first"
},
APPLICATION_NAME_2: {
NAME: "menu-two"
},
...
};
我的应用程序组件是这样的:
And my application component like this :
<template>
<v-flex xs12>
<v-card dark color="light-blue darken-4">
<v-card-title>
<v-flex xs4>
<p class="title">Name</p>
<p class="body-2 margin-sub-text">{{detailMenu.name}}</p>
</v-flex>
<v-flex xs4>
<p class="title">URL</p>
<p class="body-2 margin-sub-text">{{detailMenu.url}}</p>
</v-flex>
<v-flex xs4>
...
</v-flex>
</v-card-title>
</v-card>
</v-flex>
</template>
<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
..
created() {
this.getDetailMenu(this.$route.path);
},
computed: mapState({
data: state => state.dataStore.data,
...mapGetters("dataStore", ["detailMenu"])
}),
methods: {
...mapActions("dataStore", ["getDetailMenu"]),
},
watch: {
$route() {
this.getDetailMenu(this.$route.path);
}
}
};
</script>
从配置路由器来看,我的路由器不是动态的.我想让我的路由器动态.所以路由器配置中的路径取自listMenu (API)
From the configuration router, my router is not dynamic. I want to make my router dynamic. So the path in the router configuration is taken from listMenu (API)
我该怎么做?
推荐答案
我想 getDetailMenu
正在调用 API 方法来获取 listMenu
.您可以使用 addRoutes 方法
I suppose getDetailMenu
is calling API method to get listMenu
.
You can create route dynamically using addRoutes method
伪代码
created() {
this.getDetailMenu(this.$route.path)
.then((listMenu) => {
// you need to return listMenu from getDetailMenu
listMenu.forEach((item, index) => createAndAppendRoute(item, index))
})
},
methods: {
createAndAppendRoute: (item, index) => {
console.log(item, index)
// Base on your data, you should be able to create router name and path from item and index
// here is just an example
let newRoute = {
path: `/${item}`,
name: `${item}_${index}`,
components: { default: Application, header: MainNavbar },
}
this.$router.addRoutes([newRoute])
}
}
这篇关于如何在vue路由器上做动态路由?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文