Question

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

我该怎么做？

Answer 1

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

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

Answer 2

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

Answer 3

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

router.addRoutes(routes: Array<RouteConfig>)

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

如何在vue路由器上进行动态路由？

3 个答案: