解决vue单页面应用进入页面加载所有 js 的问题


Posted in Javascript onAugust 12, 2020

一般在index.js中都是这么引入的组件

import from '@/pages/my'
import Cart from '@/pages/cart'
import Order from '@/pages/order'
import TMap from '@/pages/map'
import New from '@/pages/new'

换成这样就好啦

const My = r => require.ensure([], () => r(require('@/pages/my')), 'my')
const Cart = r => require.ensure([], () => r(require('@/pages/cart')), 'cart')
const Order = r => require.ensure([], () => r(require('@/pages/order')), 'order')
const TMap = r => require.ensure([], () => r(require('@/pages/map')), 'map')
const New = r => require.ensure([], () => r(require('@/pages/new')), 'new')

补充知识:vue -- router路由跳转错误 , NavigationDuplicated

vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下版本则不会出现以下警告!!!,因路由回调问题…)

方案一:

安装vue-router3.0以下版本:先卸载3.0以上版本然后再安装旧版本 npm install @vue-router2.8.0 -S

方案二:

针对于路由跳转相同的地址添加catch捕获一下异常:this.$router.push('/location').catch(err => { console.log(err) })

方案三:

在main.js下注册一个全局函数即可

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}

注:官方vue-router新版本路由默认回调返回的都是promise,原先就版本的路由回调将废弃!!!!

以上这篇解决vue单页面应用进入页面加载所有 js 的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
angularJS 入门基础
Feb 09 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
深入探究node之Transform
Jul 20 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
了解JavaScript中let语句
May 30 Javascript
vue设置默认首页的操作
Aug 12 #Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 #Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 #Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 #Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 #Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 #Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 #Javascript
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
工作中个人的自我评价
2013/12/31 职场文书
单位单身证明范本
2014/01/11 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
团员年度个人总结
2015/02/26 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书