路由懒加载

路由懒加载也叫延迟加载

现在我们路由使用情况

 1 import vue from "vue"
 2 import vueRouter from "vue-router"
 3 import Home from "../views/Home.vue"
 4 import Sport from "../views/Sport.vue"
 5 vue.use(vueRouter)
 6 let router=new vueRouter({
 7     linkActiveClass:'is-active',
 8     routes:[
 9         {
10             path:'/home',
11             component:Home
12         },
13         {
14             path:'/sport',
15             name:'sport',
16             component:Sport
17         }
18     ]
19 })
20 export default router

上面是我们没有配置路由懒加载的路由，回有当打包编译的时候所有的相关有路由的页面都会被编译，会造成页面编译和加载特别慢

此时我们需要路由的懒加载，懒加载就是随用随加载，提高页面的加载性能

 

 1 import vue from "vue"
 2 import vueRouter from "vue-router"
 3 vue.use(vueRouter)
 4 let router=new vueRouter({
 5     linkActiveClass:'is-active',
 6     routes:[
 7         {
 8             path:'/home',
 9             component:()=>import('@/views/Home')   
10         },
11         {
12             path:'/sport',
13             name:'sport',
14             component:()=>import('@/views/Sport')                
15             }        
16     ]
17 })
18 export default router

 

上面的代码是路由的懒加载，机理就是什么时候用到该组件然后再去加载，这样提高页面的性能优化，尤其是页面的初始化加载会变快

 

posted @ 2021-09-23 16:34  keyeking  阅读(1360)  评论(0)  编辑  收藏  举报