如何加載我使用Vue.js和Vue-router調用的路徑

Question

我正在使用Vue.js開發一個應用程序SPA，我意識到當我使用Vue-router調用import來加載路由時，它正在加載所有內容。

我目前的代碼：

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>

Answer 1

我已經在Vue.js項目中實現了一些東西，我相信你正在尋找在你的應用程序中使用的東西。

您需要使用resolve方法將imports更改為const ，但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'));
    });
};

它允許使用延遲加載概念，它只會在調用時加載。