在组件而不是 app.js 中加载 vue 路由答案

【问题标题】：Load vue routes in a component instead of app.js在组件而不是 app.js 中加载 vue 路由
【发布时间】：2020-08-11 22:50:09
【问题描述】：

我正在使用 Laravel，目前，我正在 apps.js 中加载我的 Vue 路由，如下所示：

import MyComponentMain from './components/MyComponentMain.vue';

import MyComponentOne from './components/MyComponentOne.vue';
import MyComponentTwo from './components/MyComponentTwo.vue';

const routes = [
    {
        path: '/my-component-main',
        component: MyComponentMain
    },
    {
        path: '/my-component-one',
        component: MyComponentOne
    },
    {
        path: '/my-component-two',
        component: MyComponentTwo
    },
];

const router = new VueRouter({
    routes
});

const app = new Vue({
    el: '#app',
    router: router
});

如何将MyComponentOne 和MyComponentTwo 路由的声明移动到MyComponentMain.vue？

./components/MyComponentMain.vue:

<template>
  <div class="container">
    <router-link
      class="nav-link"
      to="/my-component-one"
    >
    <router-link
      class="nav-link"
      to="/my-component-two"
    >
  </div>
</template>

<script>
  mounted () {
    console.log('Main component mounted.');
  }
</script>

【问题讨论】：

不清楚为什么你想这样做。将组件导入您的路由器定义是非常标准的，那么为什么要改变规范呢？
@Phil 那是因为这些路由只在这个主要组件中使用，而且我还有许多其他类似的路由在我的app.js 捆绑文件中占用了太多行，我想清理它并只加载必要的路线。
路由必须全部预先定义。你不能延迟加载路由定义

标签： laravel vue.js vue-router

【解决方案1】：

根据您的评论，您可以通过创建 routes 文件夹来拆分路由，并按文件组织路由并合并到 app.js，类似于您在 vue store 模块中的操作。

/routes/MyComponentMain.vue

import MyComponentMain from './components/MyComponentMain.vue';

const componetMainRoutes = [

    {
        path: '/my-component-main',
        component: MyComponentMain
    },
];

export componetMainRoutes

/routes/MyComponentOne.vue

import MyComponentOne from './components/MyComponentOne.vue';

const componetOneRoutes = [

    {
        path: '/my-component-one',
        component: MyComponentOne
    },
];

export componetOneRoutes

/routes/MyComponentTwo.vue

import MyComponentTwo from './components/MyComponentTwo.vue';

const componnetTwoRoutes = [

    {
        path: '/my-component-two',
        component: MyComponentTwo
    },
];

export componnetTwoRoutes

然后将它们全部放在app.js

import componetMainRoutes from "./routes/componetMainRoutes"
import componetOneRoutes from "./routes/MyComponentOne"
import componnetTwoRoutes from "./routes/componnetTwoRoutes"

const routes = [
  ...componetMainRoutes,
  ...componetOneRoutes,
  ...componnetTwoRoutes
];

const router = new VueRouter({
    routes
});

const app = new Vue({
    el: '#app',
    router: router
});

【讨论】：