Vue Router懒加载

时间:2022-07-24
本文章向大家介绍Vue Router懒加载，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

官方回答:当打包构建应用时，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
    }
  ]
})

随机文章
Javascript知识点必读
最近更新