Vue Router懒加载

明知山

发布于 2020-09-03 10:21:34

2990

发布于 2020-09-03 10:21:34

文章被收录于专栏：前端开发随笔

官方回答:当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

这是配置的路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
 mode: 'history',  //去掉url中的#
  routes: [{
      path: '/',
      name: 'index',
      component: () =>
        import( /* webpackChunkName: "/" */ '@/views/index')
    },
    {
      path: '/power',
      name: 'power',
      component: () =>
        import( /* webpackChunkName: "power" */ '@/views/power')
    }
  ]
})

这是没有配置的

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/views/index'
import power from '@/views/power'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/power/:id',
      name: 'power',
      component: power
    }
  ]
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/08/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript