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
    }
  ]
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VueRouter4.x适配Vue3

    wePanda
  • Dart中..级联操作

    wePanda
  • 微信小程序skeleton骨架屏

    文本添加class=“skeleton-rect”, 图片添加class=“skeleton-radius”

    wePanda
  • useful-scripts

    python使用相对简单,快速便捷,很适合作为脚本开发;作为"资深"的sub3/vscode控,使用编辑器鞋脚本再也适合不过,vscode中的调试功能太好用啦:

    LiosWong
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (六) 项目注册与包引入

    xing.org1^
  • 从零开始深度学习(十七):Softmax

    假设不单单需要识别猫,而是想识别猫,狗和小鸡,其中把猫称为类1,狗为类2,小鸡是类3,如果不属于以上任何一类,就分到“其它”或者说“以上均不符合”这一类,把它称...

    我是管小亮
  • RDKit:可视化药效团(Pharmacophore)

    成药靶点中必定存在着能与药物结合的特异性结合位点。对某个靶点发挥活性的化合物在结构特征上必定有相似之处。这些化合物的最普遍的共有特性被定义为药效团(pharma...

    DrugAI
  • 【腾讯云的1001种玩法】十分钟轻松搞定云架构 之四:替你分心的负载均衡

    本文主要讲以下几个方面:负载均衡如何帮我们分心 、自建负载均衡和云端负载均衡的优劣之分 、腾讯云负载均衡的优势、腾讯云负载均衡的使用。

    白宦成
  • PYQT5 vscode联合操作qtdesigner的方法

    通过pycharm生成的为一个和designer一样的py文件,如上图中第二个文件。通过vscode生成的是以Ui_开头的一个py文件。

    砸漏
  • Android向node.js编写的服务器发送数据并接收请求

    本文实例为大家分享了Android向node.js服务器发送数据并接收请求的具体代码,供大家参考,具体内容如下

    砸漏

扫码关注云+社区

领取腾讯云代金券