应用程序运行时将路由添加到 Vue.js 路由器

Question

我目前正在构建一个应用程序，我想向该应用程序添加扩展。这些扩展应该有自己的 Vue 组件和视图（因此也有路由）。我不想重建应用程序，而是动态添加新的视图和路线。Vue 2 有没有好的方法来做到这一点？

在下面我添加了一些文件，希望能让这个问题更容易理解。包含基本结构并以常规方式router/index.js添加到文件中。main.js在加载期间，app.vue应加载新路由并将其附加到已存在的路由中。

路由器

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

应用程序.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
// @ is an alias to /src
import TestView from '@/views/Test.vue'

export default {
  name: 'Home',
    components: {},
    created() {

      <add route to router>({
          component: TestView,
          name: "Test",
          path: "/test"
      })
    }
}
</script>

我用这个短语<add route to router>来演示我想要添加路线的方式。添加路线后，用户应该能够使用 直接导航到新视图<router-link to="/test">Test</router-link>。

任何帮助，将不胜感激。

Answer 1

用于addRoute在运行时添加路由。以下是文档中对此方法的解释：

添加一条新路由到路由器。如果该路由有一个名称并且已经存在一个具有相同名称的现有路由，则会覆盖该名称。

将其导入routerApp.vue即可使用：

应用程序.vue

<script>
import router from './router/index.js';
import TestView from '@/views/Test.vue'

export default {
  created() {
    router.addRoute({
      component: TestView,
      name: "Test",
      path: "/test"
    })
  }
}
</script>