How to load just routs that I call using Vue.js and Vue-router

Question

I am developing an application SPA with Vue.js and I realized that when I call imports to load the routes using Vue-router it is loading everything.

My current code:

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: '/' }
];

I was wondering if is there anything to load just part of the screen in order to be a truly SPA, I mean when it receives a click on the menu.

My menu code:

<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>

Aderbal Farias · Accepted Answer · 2019-03-31 02:40:52Z

1

I have implemented something in a Vue.js project that I believe is what you looking for using in your application.

You need to change imports to const using resolve approach, however, Home should be as is because it is the default page

You can try the code below:

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

It allows to use lazy load concept, it will only load when called.

edited Mar 31, 2019 at 2:40

answered Mar 31, 2019 at 2:31

Aderbal Farias

1,02610 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load just routs that I call using Vue.js and Vue-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related