I am in the process of developing an application and I want to incorporate extensions into it. These extensions will have their own Vue components, views, and routes. Instead of rebuilding the entire app, I am looking for a way to dynamically add these new views and routes using Vue 2.
Below, I have included the files that provide more clarity on this question. The router/index.js file contains the foundational structure and is included in the main.js file in the usual manner. When the app.vue loads, the new routes should be loaded and added to the 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',
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>
To illustrate how I want to add the route, I used the phrase <add route to router>. Once the route is added, users should be able to navigate directly to the new view using
<router-link to="/test">Test</router-link>I would greatly appreciate any assistance with this matter.