解决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 相关文章推荐
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Express使用html模板的详细代码
Sep 18 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
微信小程序实现多图上传
Jun 19 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
javascript中的几个运算符
2007/06/29 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
js的对象与函数详解
2019/01/21 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
群众路线剖析材料
2014/02/02 职场文书
中学生期末评语
2014/02/03 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
二年级学生评语大全
2014/04/23 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
安全责任协议书范本
2016/03/23 职场文书
创业计划书之废品回收
2019/09/26 职场文书