长兴县住房建设局网站,星子县网站建站公司,织梦调用网站备案号,营销团队名称为什么用路由懒加载 首屏组件加载速度更快一些#xff0c;解决白屏问题#xff0c;常言道需要就加载#xff0c;不需要就先放一边 懒加载定义 懒加载简单来说就是延迟加载或按需加载#xff0c;即在需要的时候的时候进行加载。 使用
常用的懒加载方式有两种#xff1a;即…为什么用路由懒加载 首屏组件加载速度更快一些解决白屏问题常言道需要就加载不需要就先放一边 懒加载定义 懒加载简单来说就是延迟加载或按需加载即在需要的时候的时候进行加载。 使用
常用的懒加载方式有两种即使用vue异步组件 和 ES中的import及require.ensure
1、未用懒加载vue中路由代码如下 import Vue from vueimport Router from vue-routerimport HelloWorld from /components/HelloWorldVue.use(Router)export default new Router({modehashroutes: [{path: /,name: HelloWorld,component:HelloWorld}]
})
备注mode是传参模式用hash有## 就是 hash符号中文名为哈希符或者锚点在 hash 符号后的值称为 hash 值。另外有一个history是没有的
路由的 hash 模式是利用了 window 可以监听 onhashchange 事件来实现的也就是说 hash 值是用来指导浏览器动作的对服务器没有影响HTTP 请求中也不会包括 hash 值同时每一次改变 hash 值都会在浏览器的访问历史中增加一个记录使用“后退”按钮就可以回到上一个位置。所以hash 模式 是根据 hash 值来发生改变根据不同的值渲染指定DOM位置的不同数据。
2、vue异步组件实现懒加载 方法如下componentresolve(require([需要加载的路由的地址])resolve)
import Vue from vue
import Router from vue-router/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: resolve(require([/components/HelloWorld],resolve))}]
})
3、ES 提出的import方法最常用,官网建议
方法如下const HelloWorld import(需要加载的模块地址) 不加 { } 表示直接return
import Vue from vue
import Router from vue-routerVue.use(Router)const HelloWorld ()import(/components/HelloWorld)
export default new Router({routes: [{path: /,name: HelloWorld,component:HelloWorld}]
})
延申组件懒加载与路由懒加载相同
1、原来组件中写法
templatediv classhelloOne-com/One-com1111/div
/templatescript
import One from ./one
export default {components:{One-com:One},data () {return {msg: Welcome to Your Vue.js App}}
}
/script
2、import方法
templatediv classhelloOne-com/One-com1111/div
/templatescript
const One ()import(./one);
export default {components:{One-com:One},data () {return {msg: Welcome to Your Vue.js App}}
}
/script
3、异步方法
templatediv classhelloOne-com/One-com1111/div
/templatescript
export default {components:{One-com:resolverequire([./one],resolve)},data () {return {msg: Welcome to Your Vue.js App}}
}
/script
总结
路由和组件的常用两种懒加载方式
1、vue异步组件实现路由懒加载 componentresolve require([需要加载的路由的地址], resolve) require(name)是同步加载模块的形式require([name1, name2])是异步加载模块的形式
2、es提出的import(推荐使用这种方式) const HelloWorld import(需要加载的模块地址) import函数支持动态加载模块返回一个 Promise 对象。
