Загрузка vue маршрутов в компонент вместо приложения. js - PullRequest
Новая
       19

Загрузка vue маршрутов в компонент вместо приложения. js

0 голосов
/ 28 апреля 2020

Я использую Laravel и в настоящее время я загружаю свои Vue маршруты в apps.js, например: 

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>

1 Ответ

0 голосов
/ 29 апреля 2020

Исходя из вашего комментария, вы можете разделить маршруты, создав папку маршруты и упорядочив маршруты по файлам и объединяя их в app.js, аналогично тому, как вы делаете vue модули хранения.

/ маршруты / MyComponentMain. vue

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

const componetMainRoutes = [

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

export componetMainRoutes

/ маршруты / MyComponentOne. vue

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

const componetOneRoutes = [

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

export componetOneRoutes

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