const Login = resolve => require(['@/components/Login'], resolve) // no need to import
Vue.use(Router)
let router = new Router({
// mode: 'history',
routes: [ //Get the left menu according to this traversal
{
path: '/login',
name: 'login',
component: Login
},
(components, routes) lazy loading
-
Lazy loading is also called lazy loading, that is, it is loaded when it is needed, and it is loaded as needed.
In a single-page application, if there is no lazy loading of the application, the files packaged by webpack will be abnormally large,
resulting in too much content to be loaded when entering the home page, and the delay is too long, which is not conducive to user experience.
Using lazy loading can Dividing pages and loading pages on demand can share the loading pressure of the home page and reduce the loading time. -
A code-blocking syntax, using AMD-style require
const Foo = resolve => require(['./Foo.vue'], resolve);
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({ routes: [ { mode: 'history', path: '/home', name: 'home', component: resolve => require([URL], resolve),//懒加载 children: [ { mode: 'history', path: '/home/:name', name: 'any', component: resolve => require(['@/components/any'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/my', name: 'my', component: resolve => require(['@/components/my'], resolve),//懒加载, children: [ { mode: 'history', path: '/my/:name', name: 'any', component: resolve => require(['@/components/any'], resolve),//懒加载 }, ] }, { path: '/login', name: 'Login', component: resolve=>require(['@/components/login'],resolve) }, ] });There is a question: after the project is built, is this lazy loading still useful?
-
Lazy loading is also called lazy loading, that is, it is loaded when it is needed, and it is loaded as needed.
In a single-page application, if there is no lazy loading of the application, the files packaged by webpack will be abnormally large,
resulting in too much content to be loaded when entering the home page, and the delay is too long, which is not conducive to user experience.
Using lazy loading can Dividing pages and loading pages on demand can share the loading pressure of the home page and reduce the loading time. -
A code-blocking syntax, using AMD-style require
const Foo = resolve => require(['./Foo.vue'], resolve);
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({ routes: [ { mode: 'history', path: '/home', name: 'home', component: resolve => require([URL], resolve),//懒加载 children: [ { mode: 'history', path: '/home/:name', name: 'any', component: resolve => require(['@/components/any'], resolve),//懒加载 }, ] }, { mode: 'history', path: '/my', name: 'my', component: resolve => require(['@/components/my'], resolve),//懒加载, children: [ { mode: 'history', path: '/my/:name', name: 'any', component: resolve => require(['@/components/any'], resolve),//懒加载 }, ] }, { path: '/login', name: 'Login', component: resolve=>require(['@/components/login'],resolve) }, ] });