Vue——路由的懒加载

最新推荐文章于 2022-11-28 22:38:07 发布
最新推荐文章于 2022-11-28 22:38:07 发布
阅读量95 收藏
点赞数 1
分类专栏： Vue2 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunshine_Jian/article/details/118857460
版权

 将导入路由组件的语句放到函数当中，在函数没有被调用的时候，导入语句不执行，来节省批量导入导致的运行压力。

import Index = () => import('../components/Index.vue');

/*const Index = function(){
    return import('../components/Index.vue');
}*/

Sunshine_Jian
关注
专栏目录
Vue使用日记（23）：vue-router详解（4）——路由懒加载
jimson_zhu的博客
10-24 284
路由懒加载 首先，我们知道路由中通常会定义很多不同的页面； 这些页面最后被打包在哪里呢? 一般情况下，是放在一个js文件（指app.3252jshdfsdjfskdf……js，下面会说）中； 但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大； 如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。 为了避免这种情况，就可...
vue实现路由懒加载的3种方式
lklmr的专栏
07-01 577
让路径默认跳转到某个页面并且 router-view 渲染该页面，只需要在路由配置中添加一个映射 const routes = [ { path: '/', name: 'Home', redirect: '/Home' }] 配置解析： path配置的是根路径：/ redirect是重定向，也就是会将我们的根路径重定向到/home的路径下。 export default new Router({ mode:'history', routes }) 配置html模
项目优化策略之——vue路由懒加载
撑起自己半边天
05-20 245
当打包构建项目时，JavaScript包会变得非常大，从而影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，这样就会使得项目运行变得更加高效了。
VUE3（十八）vue 路由history 模式去掉 URL 中的 # （nginx）
camellia的博客
03-25 2371
这部分内容比较少。其实更多的是参考一下vue-router4的官方文档就好。 但是，这部分还是拿出来说一下。 1：router.ts // 官方文档：https://vue3js.cn/router4/guide/#html // 引入vue-router对象 import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router"; /** * 定义路由数组 */ const rout
Vue学习笔记 —— vue路由懒加载及组件懒加载
weixin_43340295的博客
11-22 197
vue路由懒加载及组件懒加载 vue路由懒加载 为什么要使用路由懒加载？为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。 常用的懒加载方式有两种： 使用vue异步组件 component：resolve=>(['需要加载的路由的地址'，resolve]) 使用ES6中的import const HelloWorld = （）=>import('需要加载的模块地址') 1、未用懒加载，vue中的路由代码如下： import Vue from 'vue' import
vue-路由懒加载的应用
zyhzyh1120的博客
12-21 266
使用的简单记录，备忘。 vue作为单页面应用, 如果不采用按需加载的方式, 首屏加载是非常慢的,即使做了loading也是严重影响用户体验，所以按需加载路由是一个项目的基础构建。(首屏加载优化...后续会记录) 目前常用的方法 Vue异步组件 // 一个组件生成一个js文件 { path: '/', name: 'Index', component: resolve => require(['@/view/index'], resolve) },{ path: '/my',
VUE3.0——路由懒加载、组件懒加载
HarryHY的博客
10-31 3159
路由懒加载 在构建的时候已经给我们做了一个demo了 { path: '/user', name: 'user', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => im
vue——路由
weixin_52984349的博客
11-28 1798
vue——路由
vue——路由之动态注册路由、守卫路由、仓库vuex、UI框架
qq_56668869的博客
09-14 1958
动态注册路由、守卫路由、仓库vuex、UI框架
解决Vue报错:This dependency was not found
热门推荐
Sunshine_Jian的博客
03-02 1万+
This dependency was not found： * vue in ./src/main.js To install it, you can run: npm install --save vue
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突
Sunshine_Jian的博客
12-22 1万+
场景：点击行内按钮事件的时候，同时也出发触发了行的事件； 因为行内按钮的父元素是单元格，而单元格的父元素是行； 最里层子元素接收到事件后，再层层向上传递给父元素；
el-table 列内容溢出 显示省略号 悬浮显示文字
Sunshine_Jian的博客
08-03 1万+
el-table 表格列内容溢出，文本溢出，显示省略号，单行、多行省略；鼠标悬浮hover（点击click等其他其他事件）显示文字，包括el-tooltip、el-popover、show-overflow-tooltip、title等其他的一些实现方法的总结，以及一些想法的分享！...
Vue——Echarts实现折线图
Sunshine_Jian的博客
07-21 9133
一、在项目里安装 npm install echarts -S 二、新建test.vue <template> <divid="test_app"> <!--为echarts准备一个具备大小的容器dom--> <divid="main"style="width:100%;height:520px;background:#fff"></div> </div> </temp...
vue 项目打包 报错
Sunshine_Jian的博客
10-26 5825
再执行 npm run build 之后，会生成一个dist文件夹，打开index.html，控制台报错 如下图所示： 这里是因为找不到正确的路径，导致报错。 解决办法： 1、在根目录下，新建vue.config.js文件，当然有的话，就忽略此条； 2、在vue.config.js里 将publicPath: "/" 改为publicPath: "./" ，之后重新打包，npm run build 即可。 publicPath: "/" =====>&gt...
Vue 引入高德地图 vue-amap
Sunshine_Jian的博客
07-12 4996
高德开发者平台—链接地址1、控制台——我的应用——创建应用——添加key 创建应用 新建应用 选择web端（JS平台） last：到这里的 key 就有了，还得到了一个安全密钥；1、安装 2、在 main.js 里引入其中更多的插件，请参考： 插件的使用-入门-教程-地图 JS API | 高德地图API (amap.com) 3、HTML部分：编写容器 4、Script 部分：引入 AMapManager 5、Style部分（自己根据实际场景调试） 最后的效果图： 文章
Vue项目中el-table导出Excel
Sunshine_Jian的博客
03-01 4429
1、安装相关的依赖；（xlsx，file-saver） npm install --save xlsx file-saver 2、在main.js里引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' Vue.prototype.$FileSaver = FileSaver; //设置全局 Vue.prototype.$XLSX = XLSX; //设置全局 3、设置表格的id <el-table
ElementUI-分页-自定义文字-共计-跳至
Sunshine_Jian的博客
11-23 4295
场景：有时候需要使用自己去改显示的内容；包括共计 ，跳转等 效果图： HTML代码： <!-- 分页 --> <div style="display: flex; justify-content: center; padding: 10px 0"> <span style="line-height: 28px; font-size: 13px" >共 {{ currentTot...
【ElenmentUI el-date-picker日期选择器，结束时间不得早于开始时间，且只能选择距开始时间指定天数的日期】
Sunshine_Jian的博客
05-26 3313
场景： 1、开始时间不得晚于结束时间；结束时间不得早于开始时间； 2、开始时间与结束时间之间，有可选择的天数间隔，只可选择间隔日期内的日期； 例如：设置间隔时间为5天；日期的取值范围，如下： 2022-05-26 00:00:00——2022-05-30 23:59:59 2022-05-26 10:00:00——2022-05-31 10:00:00 效果： 完整代码： <template> <div> <el-but...
Vue-根据不同的路由-设置不同的title标题
Sunshine_Jian的博客
12-29 2765
根据不同的路由-设置不同的title标题；
vue H5路由跳转
最新发布
08-18
在Vue中，实现H5中的路由跳转有多种方式。其中最简单的方式是使用<router-link>标签。该标签可以实现在网站内部进行路由跳转，而不需要重新加载页面。例如，要跳转到"/login"页面，可以使用以下代码： <router-link to="/login">go login</router-link> 或者 <router-link :to="{path:'/login'}">go login</router-link> 这样，当用户点击"go login"链接时，Vue会自动切换到"/login"页面并渲染相应的组件内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue——路由之路由跳转、路由传参、路由嵌套、路由模式](https://blog.csdn.net/qq_56668869/article/details/126778607)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue基础：路由跳转的几种方式。](https://blog.csdn.net/a1424261303/article/details/88077659)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值