vue+webpack实现异步加载三种用法示例详解
2018-04-24 11:27
1126 查看
1.第一例
const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } }
注:(上面import的时候可以不写后缀)
export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要登录显示 }, }]
2.第二例
const router = new Router({ routes: [ { path: '/home', component: (resolve)=> { require(['../components/home/home'], resolve) // 省去了在上面去import引入 } } ] })
3.第三例,这也是推荐的一种
// r就是resolve// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 const Home = r => require.ensure([], () => r(require('../components/home/home')), 'home'); const router = new Router({ routes: [ { path: '/home/home', component: Home, name: 'home' , } ] })
下面给大家介绍下vue+webpack实现异步组件加载的代码,具体代码如下所示:
HTML
<input type="button" @click="showchild" value="show"> //点击按钮后,show为真,先获取child组件,再渲染div内容 <div id="contain" v-if="show"> <child></child> </div>
JS
data () { return { msg: 'Welcome to Your Vue.js App', show:false } }, methods: { showchild:function(){ this.show=true; } }, components: { 'child': function(resolve) { require(['./components/child.vue'], resolve); } }
注意:加载异步组件的时候,组件名后边的.vue不要忽略。这个例子应该比较直观了。点击按钮之后改变了变量show的布尔值为真,由于child.vue是异步组件,所以会先ajax获取组件然后渲染。
总结
以上所述是小编给大家介绍的vue+webpack实现异步加载三种用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- VUE+Webpack 实现懒加载的三种方式
- vue+webpack实现异步组件加载
- vue---vue2.x中如何异步加载路由组件,webpack+vue实现组件懒加载
- vue+webpack实现异步组件加载的方法
- react-router4 配合webpack require.ensure 实现异步加载的示例
- 详解webpack + react + react-router 如何实现懒加载
- 详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
- webpack+vue.js实现组件化详解
- React配合Webpack实现代码分割与异步加载
- 详解vue-cli快速构建vue应用并实现webpack打包
- 详解webpack异步加载业务模块
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- 详解webpack分包及异步加载套路
- 详解webpack2异步加载套路
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- Vue.js中用webpack合并打包多个组件并实现按需加载
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- 详解vue项目优化之按需加载组件-使用webpack require.ensure
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本