регистрация компонентов и маршрутов

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

Это возможная структура папок для вашего маршрутизатора: