Vue组件注册和路线

Question

我想在我的Vue项目中使用路由，但是并没有在全球范围内注册许多组件，因此我在这里遇到麻烦。

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

我的代码如下

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>

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

Answer 1

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

在文件夹中，您可以拥有一个名为index.js的文件，该文件可以构建路由器并将各个路由组件移动到其他文件。

每个路由器组件应仅返回路由器信息，而不返回路由器对象。

您仍然需要导入单个vue组件，但是它们将分散在多个文件中。这应该使事情更整洁。

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

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

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