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