在应用程序运行时向 Vue.js 路由器添加路由答案

【问题标题】：Add route to Vue.js router while app is running在应用程序运行时向 Vue.js 路由器添加路由
【发布时间】：2021-02-20 12:31:26
【问题描述】：

我目前正在构建一个应用程序，我想为这个应用程序添加扩展。这些扩展应该有自己的 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')

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> 直接导航到新视图。

任何帮助将不胜感激。

【问题讨论】：

我不完全确定我是否完全按照您的要求进行操作 - 您是否有一个路由器，但您想在运行时从组件动态添加路由？如果是这样，您能否描述问题陈述以及为什么这是您认为最好的方法？只是想确保我能以最好的方式帮助您解决问题。
应该在标准路由旁边的路由器中的路由由数据库确定，因此因用户而异。此外，我不知道所有插件，因此我不知道潜在的路由，这是我正在考虑使用动态路由的方式。如果您有更好的方法，我会很感兴趣。

标签： javascript vue.js vuejs2 vue-router web-deployment

【解决方案1】：

使用addRoute 在运行时添加路由。以下是docs对这种方法的解释：

向路由器添加新路由。如果路由有名称，并且已经存在具有相同名称的路由，则会覆盖它。

将router 导入到App.vue 中使用：

App.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>

【讨论】：