const Login = resolve => require(['@/components/Login'], resolve)    //就不用import了

Vue.use(Router)

let router = new Router({
// mode: 'history',
routes: [ //根据这个遍历得到左边菜单
{
path: '/login',
name: '登录',
component: Login
},

(组件、路由)懒加载

 
  • 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载

    在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,
    造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,
    运用懒加载可以将页面进行划分,按需加载页面,可以分担首页所承担的加载压力,减少加载用时。

  • 一种代码分块的语法,使用 AMD 风格的 require

const Foo = resolve => require(['./Foo.vue'], resolve);
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) const router = new Router({
routes: [
{
mode: 'history',
path: '/home',
name: 'home',
component: resolve => require([URL], resolve),//懒加载
children: [
{
mode: 'history',
path: '/home/:name',
name: 'any',
component: resolve => require(['@/components/any'], resolve),//懒加载
},
]
},
{
mode: 'history',
path: '/my',
name: 'my',
component: resolve => require(['@/components/my'], resolve),//懒加载,
children: [
{
mode: 'history',
path: '/my/:name',
name: 'any',
component: resolve => require(['@/components/any'], resolve),//懒加载
},
]
},
{
path: '/login',
name: 'Login',
component: resolve=>require(['@/components/login'],resolve)
},
]
});

有一个问题:项目build以后,这个懒加载还有用吗?

vue(组件、路由)懒加载的更多相关文章

  1. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  2. vue的路由懒加载

    路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...

  3. vue中路由懒加载实现amd加载文件

    一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...

  4. vue(18)路由懒加载

    什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更 ...

  5. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  6. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  7. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  8. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  9. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

    一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...

  10. vue3 + vite实现异步组件和路由懒加载

    在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...

随机推荐

  1. libubox组件(2)——blob/blobmsg (转载 https://segmentfault.com/a/1190000002391970)

    一:blob相关接口 1.数据结构 1: struct blob_attr { 2: uint32_t id_len; /** 高1位为extend标志,高7位存储id, 3: * 低24位存储dat ...

  2. F - Goldbach`s Conjecture 对一个大于2的偶数n,找有多少种方法使两个素数的和为n;保证素数a<=b; a+b==n; a,b都为素数。

    /** 题目:F - Goldbach`s Conjecture 链接:https://vjudge.net/contest/154246#problem/F 题意:对一个大于2的偶数n,找有多少种方 ...

  3. ios 关于collectionView.performBatchUpdates()方法 --时时更新

    今天想实现一个简单的collectionView动画效果,查阅相关资料发现,实现 collectionView.performBatchUpdates()方法即可,于是掉坑里了. 文档: public ...

  4. 【转】火狐右键google搜索特别慢的解决办法

    原网页:http://www.fatalist.im/blog/459.html google将谷歌中文网站google.cn的搜索服务转向到google.com.hk(香港)后,firefox右上角 ...

  5. linux 下Shell编程(四)

    for循环应用实例 for 循环可以对一个记录集中地数据依次集中地数据依次进行处理. #!/bin/bash #4.13.sh for clear     #看下图区别 for((i=1:i<1 ...

  6. POJ1182食物链(并查集经典好题)

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=66964#problem/E 题目思路:主要有两种思路:1.带权并查集2.挑战程 ...

  7. mongodb安全配置

    1. 为数据库增加管理员 use admin db.createUser({ >user:'userName', pwd:'password', roles:[{role:'userAdminA ...

  8. PHP替换字符串-str_replace

    实例 把字符串 "Hello world!" 中的字符 "world" 替换为 "Shanghai": <?php echo str_ ...

  9. .net 取得类的属性、方法、成员及通过属性名取得属性值

    //自定义的类 model m = new model();   //取得类的Type实例 //Type t = typeof(model);    //取得m的Type实例 Type t = m.G ...

  10. 0x04 MySQl 表操作

    0x01 存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制 详见:http://www.cnblogs.com/linhaifeng/articles/7213670.ht ...