Как загрузить только маршруты, которые я называю, используя Vue.js и Vue-router - PullRequest
Новая
       1

Как загрузить только маршруты, которые я называю, используя Vue.js и Vue-router

0 голосов
/ 31 марта 2019

Я разрабатываю приложение SPA с Vue.js и понял, что когда я вызываю import для загрузки маршрутов с помощью Vue-router, он загружает все.

Мой текущий код: 

import Home from './components/Home/Home.vue';
import Product from './components/Product/Index.vue';
import Participant from './components/Participant/Index.vue';

export const routes = [
    {
        path: '', 
        component: Home, 
        name: 'home',
        comments: {
            default: Home
        }
    },
    {
        path: '/product', component: Product
    },
    {
        path: '/participant', component: Participant
    },
    {   path: '*', redirect: '/' }
];

Мне было интересно, есть ли что-нибудь, чтобы загрузить только часть экрана, чтобы быть действительно SPA, я имею в виду, когда он получает щелчок по меню.

Мой код меню: 

<router-link class="nav-item" tag="li" to="/"><a class="nav-link">Home</a></router-link>
<router-link class="nav-item" tag="li" to="/product"><a class="nav-link">Product</a></router-link>
<router-link class="nav-item" tag="li" to="/participant"><a class="nav-link">Participant</a></router-link>

1 Ответ

0 голосов
/ 31 марта 2019

Я реализовал что-то в проекте Vue.js, который, я считаю, именно то, что вы ищете, чтобы использовать в своем приложении.

Вам нужно изменить imports на const, используя resolve подход, однако, Home должен быть как есть, потому что это страница по умолчанию

Вы можете попробовать код ниже: 

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

const Product = resolve => {
    require.ensure(['./components/Product/Index.vue'], () => {
        resolve(require('./components/Product/Index.vue'));
    });
};

const Participant = resolve => {
    require.ensure(['./components/Participant/Index.vue'], () => {
        resolve(require('./components/Participant/Index.vue'));
    });
};

Позволяет использовать концепцию отложенной загрузки, загружается только при вызове.

...