Vue.js vue组件注册和路由

我想在我的vue项目中使用路由，但没有全局注册许多组件，我在这里遇到了问题

我的项目使用vue cli和vue路由器 我的项目想法是仅在使用相应子组件的父组件中注册这些子组件，但我希望使用路由来控制这些组件的表示

我的代码如下

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>

从“/components/MainLayout.vue”导入MainLayout
从“/components/test.vue”导入测试
导出默认值{
组成部分：{
“主布局”：主布局，
“测试”：测试
},
名称：“应用程序”，
数据（）{
返回{
错误:，
}
},
}

---

就像上面的代码一样，我必须在main.js和app.vue中注册每个需要通过路由管理的组件。这些都很麻烦，代码也不美观。有什么方法或插件可以解决这个问题吗？

您可以将所有路由代码移动到另一个文件夹（可能名为router）

在该文件夹中，您可以有一个名为

index.js

的文件，用于构建路由器并将各个路由组件移动到不同的文件中

每个路由器组件应该只返回路由器信息，而不是路由器对象

您仍然需要导入单个vue组件，但它们将分散在多个文件中。这会让事情变得更整洁

在您的

main.js中，您需要导入路由器，类似于此

import router from './router'
....
Vue.use({
  router
})

这是路由器可能的文件夹结构：


这是显示如何使用其他文件中定义的路由的
router/index.js
的一部分

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 }
 }
})

快速提示，您可以将路由器的整个代码（包括所有导入）移动到另一个文件中；e、 g.router.js。然后从app.js导入一个文件，这样就可以包含它了。谢谢你的提示，在我提问之前我确实忽略了这一点。这对我很有帮助。在找到更好的解决方案之前，我将使用这种方法@Jeffrey有相关的演示供参考，或者在你的其他答案中有类似的代码，我不完全理解你的意思，我想我需要更多的细节来理解这个想法，但我觉得这就是我想要的答案。谢谢。@Radu:如果你能展示你的索引，那会很有帮助的，js文件内容。@TusharKshirsagar谢谢你的建议，我已经添加了router/index.js的内容