I'm currently building an app and I would like to add extensions to this app. These extensions should have their own Vue ponents and and views (and thus also routes). I don't want to rebuild the app but instead add the new views and routes dynamically. Is there a good way to do that with Vue 2?

In the following I added the files that I hope makes this question a bit more prehensible. The router/index.js contains the basic structure and is added to the main.js file in the regular fashion. During the load of the app.vue the new routes should be loaded and appended to the already existing ones.

router

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    ponent: 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.
    ponent: () => 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',
    ponents: {},
    created() {

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

I used the phrase <add route to router> to demonstrate the way I would like to add the route. After the route is added the user should be able to directly navigate to the new view using <router-link to="/test">Test</router-link>.

Any help would be appreciated.

I'm currently building an app and I would like to add extensions to this app. These extensions should have their own Vue ponents and and views (and thus also routes). I don't want to rebuild the app but instead add the new views and routes dynamically. Is there a good way to do that with Vue 2?

In the following I added the files that I hope makes this question a bit more prehensible. The router/index.js contains the basic structure and is added to the main.js file in the regular fashion. During the load of the app.vue the new routes should be loaded and appended to the already existing ones.

router

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    ponent: 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.
    ponent: () => 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',
    ponents: {},
    created() {

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

I used the phrase <add route to router> to demonstrate the way I would like to add the route. After the route is added the user should be able to directly navigate to the new view using <router-link to="/test">Test</router-link>.

Any help would be appreciated.

• javascript
• vue.js
• vuejs2
• vue-router
• web-deployment

• I'm not totally sure that I follow exactly what you're trying to do - is it that you have a router but you want to dynamically add routes to it from the ponent at runtime? If so can you describe the problem statement and why this is the approach you believe to be best? Just trying to make sure I can help you solve the problem in the best way possible. – maxshuty Commented Feb 20, 2021 at 12:39
• 1 The routes that should be in the router along side the standard routes are determined by the db and thus are different from user to user. Additionally I do not know all plugins and therefore potential routes that is way I was thinking about working with dynamic routes. I would be interested if you have a better approach. – Philipp M Commented Feb 22, 2021 at 20:10

1 Answer 1

Use addRoute to add routes at runtime. Here is the explanation for this method from the docs:

Add a new route to the router. If the route has a name and there is already an existing one with the same one, it overwrites it.

Import the router into App.vue to use it:

App.vue

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

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