解决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获取flash加载的百分比的实现代码
May 25 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
JS出现404错误原理及解决方案
Jul 01 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
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
让焦点自动跳转
2006/07/01 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Django自定义manage命令实例代码
2018/02/11 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
python 如何在测试中使用 Mock
2021/03/01 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
struct与class的区别
2014/02/03 面试题
品质主管的岗位职责
2013/12/04 职场文书
大学生旷课检讨书
2014/01/22 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
社区工作者个人总结
2015/02/28 职场文书
2015年团支部工作总结
2015/04/03 职场文书
阿甘正传观后感
2015/06/01 职场文书