vue.js - 如何在vue路由器上做动态路由?
问题描述
我的MainNavBar组件是这样的:
<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。这是一个菜单列表
我的路由器配置是这样的:
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"
},
...
};
我的应用程序组件是这样的:
<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)
我怎么做?
解决方案
我想getDetailMenu
是调用 API 方法来获取listMenu
. 您可以使用addRoutes方法动态创建路由
伪代码
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])
}
}
推荐阅读
- sql - Oracle SQL 不是按表达式分组
- sql - oracle sql中的最新日期
- python - 在所有文件和文件夹中搜索一组关键字,然后使用 python 在 excel 文件中列出详细信息
- swift - 带有动画的文本字段四边边框
- javascript - 如何避免Angular中ngModelChange上的“TypeError:无法读取未定义的属性'长度'”
- python - OpenCV 问题:FileNotFoundError: [WinError 2] 系统找不到指定的文件
- angular - 如何在 Angular 6 中使用 pbkdf2_sha256 算法加密密码
- java - Java从文本文件中替换字符串中的一个单词
- rest - 在使用 Multer 将文件上传到文件夹之前删除和创建文件夹
- ios - 当 HTTP 请求命中并且应用程序突然进入后台时,iOS 12 URLSession 中断