码迷,mamicode.com
首页 > 其他好文 > 详细

vue路由的异步加载(懒加载)方法

时间:2019-12-04 11:43:33      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:select   fun   nal   http   否支持   pack   新特性   func   stat   

vue路由的异步加载(懒加载)方法。

 阅读约 2 分钟

vue本身不多介绍。直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果项目巨大,那么首页加载会是灾难。所以我们就需要把某些路由用异步加载(懒加载)的方式进行加载.

1.先来看正常的加载方式

import Login from "@/components/pages/signIn/signIn";

export default new Router({
  routes: [ {
      path: ‘/login‘,
      component: Login,
    }]
});

2.下面是第一种异步加载方法

export default new Router({
  routes: [ {
      path: ‘/login‘,
      component: resolve=>require(["@/components/pages/signIn/signIn"],resolve),
    }]
});

3.下面是第二种异步加载方法(因为我们公司的项目整个就是用vue结合webpack的方式搭建的。所以这个方法直接使用是没问题的。如果只是部分的界面使用vue的,可能试一下才能确定能不能用,可能要考虑import能否支持(转化)的问题,毕竟这是ES6新特性)

export default new Router({
  routes: [ {
      path: ‘/login‘,
      component: ()=>import("@/components/pages/signIn/signIn"),
    }]
});

 

vue路由的异步加载(懒加载)方法

标签:select   fun   nal   http   否支持   pack   新特性   func   stat   

原文地址:https://www.cnblogs.com/mmzuo-798/p/11981889.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!