路由的懒加载方式
路由懒加载的好处:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。如图所示:import Vue from 'vue'import Router from 'vue-router'import home from '../view/home/home'import fen
·
路由懒加载的好处:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
如图所示:
import Vue from 'vue'
import Router from 'vue-router'
import home from '../view/home/home'
import fenlei from '../view/fenlei/fenlei'
import gouwuche from '../view/gouwuche/gouwuche'
import geren from '../view/geren/geren'
以上则是正常的使用import来进行组件的导入,这样会使得页面加载缓慢,js包会变得很大。所以最好的方式则是对路由进行懒加载方式,但需要跳转到要用的页面的时候在对该页面进行加载,这样大大提高了效率。
如图所示;
const home = ()=> import('../view/home/home')
const fenlei = ()=> import('../view/fenlei/fenlei')
const gouwuche = ()=> import('../view/gouwuche/gouwuche')
const geren = ()=> import('../view/geren/geren')
这种方法则是使用懒加载方式,是ES6方式的懒加载,还有vue异步组件加载,
如图:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [{
// 进行路由配置,规定'/'引入到home组件
path: '/',
name: 'Home',
component: resolve => require(['../pages/Home.vue'], resolve),
meta: {
title: 'home'
}
},
{
path: '/about',
name: 'About',
component: resolve => require(['../pages/About.vue'], resolve)
}
]
})
更多推荐
已为社区贡献1条内容
所有评论(0)