vue(组件、路由)懒加载
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(组件、路由)懒加载的更多相关文章
- Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...
- vue的路由懒加载
路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...
- vue中路由懒加载实现amd加载文件
一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...
- vue(18)路由懒加载
什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更 ...
- vue路由懒加载及组件懒加载
一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...
- 【巷子】---vue路由懒加载---【vue】
一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- vue进阶:vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
- vue3 + vite实现异步组件和路由懒加载
在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...
随机推荐
- 这是一篇markdown测试博客
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接 ...
- Struts2是一个基于MVC设计模式的Web应用框架
Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互. Struts ...
- PNP与NPN三极管
主要区别是电流流向和电压不同:PNP管子是发射极流入后从基极和集电极流出,NPN管子是基极和集电极流入从发射极流出.PNP管子工作在放大区时电压是,Ue>Ub>Uc,NPN管子工作在放大区 ...
- 在NodeJS中使用流程控制工具Async
本文介绍一款流程控制工具async,在编写接口或者编写测试用例的过程中总是会用到它. 由于nodejs是异步编程模型,有一些在同步编程中很容易做到的事情,现在却变得很麻烦.Async的流程控制就是为了 ...
- java中==和equals区别
主要是使用String时候的区别! 一.java当中的数据类型和“==”的含义 基本数据类型(也称原始数据类型) :byte,short,char,int,long,float,double,bool ...
- [ACM] hdu 3923 Invoker (Poyla计数,高速幂运算,扩展欧几里得或费马小定理)
Invoker Problem Description On of Vance's favourite hero is Invoker, Kael. As many people knows Kael ...
- tomcat访问日志分析
常使用web服务器的朋友大都了解,一般的web server有两部分日志: 一是运行中的日志,它主要记录运行的一些信息,尤其是一些异常错误日志信息 二是访问日志信息,它记录的访问的时间,IP,访问的资 ...
- ZOJ1311(Network)
题目链接:传送门 题目大意:给你一副无向图,求有多少个割点 题目思路:tarjan算法(此题读入是字符串读入,需注意) #include <iostream> #include <c ...
- 解决EasyNVR现场无固定公网IP的问题,万千企业期待的EasyNVS管理平台是什么?
前言 EasyNVS云管理平台已经研发上线,今天就来给大家讲解一下EasyNVS到底是个啥,有什么特殊的功能呢? 首先,我们先从EasyNVR智能云终端(以前我们常称之为EasyNVR无插件直播服务器 ...
- JavaScript中对事件简单的理解
事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...