What is route lazy loading
By default, the webpage will load all the pages as soon as it is opened, and the lazy loading of the route is to load on demand, only loading the module we clicked.
The principle of lazy loading of routes
Change the routing-related components to asynchronous components, and load the content of the components when the function is called.
Routing lazy loading code implementation
common routing configuration
import Home from '../pages/Home/Home.vue'
import TableTop from '../pages/TableTop/TableTop.vue'
import Community from '../pages/Community/Community.vue'
import Car from '../pages/Car/Car.vue'
import Key from '../pages/Keylianxi/Key.vue'
export default [
{
path: '/',
component: () => import('../pages/Login/Login.vue'),
meta: {
title: '小区管理', isAuth: false }
},
{
path: '/login',
// 异步加载
component: () => import('../pages/Login/Login.vue'),
meta: {
title: '登录', isAuth: false }
},
{
path: '/home',
name: 'myhome',
component: Home,
meta: {
title: '首页', isAuth: false },
children: [
{
path: 'tabletop', components: {
content: TableTop },
meta: {
title: '桌面', isAuth: false },
},
{
path: 'community', components: {
content: Community },
meta: {
title: '小区管理', isAuth: false }
},
{
path: 'key', components: {
content: Key },
meta: {
title: '桌面', isAuth: false },
},
{
path: 'car/',
name: 'car',
components: {
content: Car },
meta: {
title: '车位管理', isAuth: false }
},
]
},
]
Routing configuration for lazy loading of routes
export let myroutes = [
{
path: '/', component: () => import('../pages/Login/Login.vue') },
{
path: '/login',
// redirect:{name:'myhome'},
component: () => import('../pages/Login/Login.vue')
},
{
path: '/home',// "/home/:name"->"/home/asfda"
name: 'myhome',
meta: {
title: '首页' },
component: () => import('../pages/Home/Home.vue'), //{default:Home}
children: [
{
path: "zhuomian",
name: 'zhuomian',
components: {
content: () => import('../pages/ZhuoMian/ZhuoMian.vue'),//"视图的名字"：组件
},
meta: {
keepAlive: true,
title: '桌面',
isAuth: false
},
beforeEnter: (to, from) => {
console.log('beforeEnter')
return true
},
},
{
path: "xiaoqu",
components: {
content: () => import('../pages/XiaoQu/XiaoQu.vue')
},
meta: {
keepAlive: false,
title: '小区管理',
isAuth: false
}
},
{
path: "chewei",
name: 'chewei',
meta: {
title: '车位管理', isAuth: false, keepAlive: true },
components: {
content: () => import('../pages/Car/Car.vue')
},
},
{
path: "/home/chewei/get",
name: 'getCar',
components: {
content:()=> import('../pages/Car/ShowCar.vue')
}
},
{
path: "key",
name: 'key',
meta: {
title: 'key值得使用', isAuth: false, keepAlive: true },
components: {
content: () => import('../pages/keylianxi/key.vue')
},
}
]
}
]