如何在vue路由器上做动态路由？答案

【问题标题】：How to make dynamic routes on the vue router?如何在vue路由器上做动态路由？
【发布时间】：2020-01-10 04:37:53
【问题描述】：

我的 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)

我该怎么做？

【问题讨论】：

没有人可以帮助我吗？

标签： vue.js vue-component vuex vue-router vuex-modules

【解决方案1】：

我想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])
  }
}

【讨论】：

可以将addRoutes method 放入路由配置中。所以没有放在组件vue中

【解决方案2】：

此链接应该会有所帮助： https://router.vuejs.org/guide/essentials/navigation.html

goTo(key) {
  this.$router.push({ path: key });
}

【讨论】：

我需要特别的答案。所以它适合我的情况

【解决方案3】：

你可以使用 router.addRoutes 方法（https://router.vuejs.org/api/#router-addroutes）：

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多路由到路由器。参数必须是一个数组，使用与路由构造函数选项相同的路由配置格式。

【讨论】：