Question

我正在使用 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>

Answer 1

根据您的评论，您可以通过创建 routes 文件夹来拆分路由，并按文件组织路由并合并到app.js中，这与您执行vue存储模块的方式类似。

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

在组件而不是app.js中加载Vue路由

1 个答案: