vue 组件注册和路由

Question

我想在我的 vue 项目中使用路由，但是没有全局注册很多组件，我在这里遇到了麻烦。

我的项目使用vue-cli和vue-router 我的项目思路是只在使用对应子组件的父组件中注册这些子组件，但是我想使用路由来控制这些组件的呈现。

我的代码如下

主程序

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

应用程序

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

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

Answer 1

您可以将所有路由代码移动到不同的文件夹（可能命名为路由器）。

在该文件夹中，您可以有一个名为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 }
 }
})