Answers for "vue router lazy load example"

vue router lazy load example

/*
Laravle Vue Lazy Load example
*/

//route.js
import VueRouter from 'vue-router'
// Routes
const routes = [
    {
        path: '/',
        name: 'demo',
        component: () => import ('./pages/Demo'),
        meta: {
            auth: false
        }
    },
    {
        path: '/register',
        name: 'register',
        component: () => import ('./pages/Register'),
        meta: {
            auth: false
        }
    },
    {
        path: '/login',
        name: 'login',
        component: () => import ('./pages/Login'),
        meta: {
            auth: false
        }
    },
    // USER ROUTES
    {
        path: '/dashboard',
        name: 'dashboard',
        component: () => import ('./pages/user/Dashboard'),
        meta: {
            auth: true
        }
    },
    {
        path: '/test',
        name: 'testview',
        component: () => import ('./pages/user/TestView'),
        meta: {
            auth: true
        }
    },
    {
        path: '/settings',
        name: 'settings',
        component: () => import ('./pages/user/Settings'),
        meta: {
            auth: true
        }
    },
    {
        path: '/404',
        name: 'redirect',
        redirect: '/dashboard',
        meta: {
            auth: true
        }
    },
]
const router = new VueRouter({
    history: true,
    mode: 'history',
    routes,
})
export default router


//app.js

require('bootstrap');
import 'es6-promise/auto'
import axios from 'axios'
import Vue from 'vue'
import VueAuth from '@websanova/vue-auth'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import Index from './Index'
import auth from './auth'
import router from './router'
import {Lang} from 'laravel-vue-lang'
import titleMixin from './titleMixin'


// Register the plugin
Vue.use(Lang, {
    locale: 'uz',
    fallback: 'uz',
    ignore: {
        uz: ['validation'],
    },
});

Vue.mixin({
    methods: {
        assets(path) {
            var base_path = window._assets || '';
            return base_path + path;
        }
    }
})
Vue.mixin(titleMixin)

// Set Vue globally
window.Vue = Vue

// Set Vue router
Vue.router = router
Vue.use(VueRouter)

// Set Vue authentication
Vue.use(VueAxios, axios)
axios.defaults.baseURL = `${process.env.MIX_APP_URL}/api/v1`
Vue.use(VueAuth, auth)

// Load Index
Vue.component('index', Index)
const app = new Vue({
    el: '#app',
    router
})

vue js lazy load component

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [{ path: '/foo', component: Foo }]
})

Lazy Loading Routes vue

routes: [
    {
      path: '/vue_films-app',
      name: 'Movies',
      component: Movies,
    },
    {
      path: '/vue_films-app/details/:id',
      name: 'Details',
      component: () => import('../views/Details.vue'),
    },
  ],