vue components registration and routes - vue.js

Question

I want to use routing in my vue project, but don't register many components globally, I am having trouble here.
My project uses vue-cli and vue-router
My project idea is to register these subcomponents only in the parent component that uses the corresponding subcomponent, but I want to use routing to control the presentation of these components.
My code is as follows
Main.js
import Vue from "vue";
import App from "./App";
import VueRouter from 'vue-router'
import test from "./components/test.vue"
Vue.use(VueRouter)
Vue.config.productionTip = false;
const routes = [
{
path: '/test', component: test,
}
]
const router = new VueRouter({routes: routes});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
<main-layout>
<router-view></router-view>
</main-layout>
</div>
</template>
<script>
import MainLayout from "./components/MainLayout.vue"
import test from "./components/test.vue"
export default {
components: {
"main-layout": MainLayout,
"test": test
},
name : "app",
data(){
return {
collapsed: false,
}
},
}
</script>
Just like the code above, I have to register every component that needs to be managed by routing in main.js and app.vue. These are cumbersome and the code is not beautiful. Is there any way or plugin to solve this problem?

Answer 1

You can move all the routing code to a different folder (possibly named router).
Inside the folder you can have a file called index.js that builds the router and move individual routing components to different files.
Each router component should only return router information and not a router object.
You'll still need to import individual vue components, but they'll be scattered across multiple files. This should make things tidier.
In your main.js will need to import the router, something similar to this
import router from './router'
....
Vue.use({
router
})
This is a possible folder structure for your router:
This is part of router/index.js that shows how to use routes defined in other files
import Vue from 'vue'
import Router from 'vue-router'
import API from '#/api'
import DashboardRoutes from './dashboard'
import CustomerRoutes from './customer'
import MaintenanceRoutes from './maintenance'
import DashboardStudioRoutes from './studio'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/api',
name: 'Api',
component: Api
},
DashboardStudioRoutes,
DashboardRoutes,
CustomerRoutes,
MaintenanceRoutes,
{
path: '*',
name: '404',
component: NotFound
},
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})