javascript-如何仅加载使用Vue.js和Vue-router调用的路由

我正在使用Vue.js开发应用程序SPA,我意识到当我调用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>

解决方法:

我已经在Vue.js项目中实现了一些功能,相信您正在寻找在应用程序中使用的功能.

您需要使用解决方法将导入更改为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'));
    });
};

它允许使用延迟加载概念,仅在调用时才加载.

标签：vue-router,vue-js,html,javascript
来源： https://codeday.me/bug/20191024/1922772.html