什么是路由懒加载
网页默认的是一打开就会去加载所有的页面,路由懒加载就是按需加载,只加载我们点击的那个模块。
路由懒加载的原理
将路由相关的组件改成异步组件的写法,当函数调用的时候再去加载组件的内容。
路由懒加载代码实现
普通的路由配置
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 }
},
]
},
]
路由懒加载的路由配置
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')
},
}
]
}
]