时间戳

首页 > 解决方案 > 在应用程序运行时向 Vue.js 路由器添加路由

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

问题描述

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

任何帮助，将不胜感激。

标签： javascriptvue.jsvuejs2vue-routerweb-deployment

解决方案

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

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

router将其导入App.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>

推荐阅读