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

一般在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 的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目出现页面空白的解决方案

    今天新建项目,然后发现路由也改了  app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login  能访问  里面确实空白的 错误: 错误原因: path: '/'   只能有1个 整个项目只能有一个[但是我有了2个],然后我要重定向到login页面,我path又没配置好. 导致页面啥都出不来. 解决办法如下: 以上这篇vue项目出现页面空白的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决vue单页面 回退页面 keeplive 缓存问题

    场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!

  • 浅谈Vue.js 关于页面加载完成后执行一个方法的问题

    首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况. 解决思路: 1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签. 2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数. 方法1案例:tab页里的子页面如果没有内容就隐藏 父页面代码 <e

  • 详解vue页面首次加载缓慢原因及解决方案

    第一次打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅.主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时.这里简单总结一下自己用到的一些优化的方案. 首先我们可以安装webpack-bundle-analyzer 插件,通过这个插件我们可以在打包的时候看到打包文件的大小,可以明显的看出哪些文件比较大. 解决方案一 1,去掉编译文件中map文件.在编译好后,我们会看到文件夹下有特别多的.

  • 解决vue 单文件组件中样式加载问题

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • 解决vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

  • 浅谈VUE单页应用首屏加载速度优化方案

    浅谈VUE单页应用首屏加载速度优化方案

    单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 webpack开启gzip压缩 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口 使用CDN资源,减小服务器带宽压力 在index.html中引入cdn资源 ... <body> &

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

    一般在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')),

  • 解决vue单页面应用中动态修改title问题

    详细信息查看:vue-weachat-title 解决问题: 1.Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2.在vue单页面中,通过浏览器分享到QQ.微信等应用中的链接,只有一个首页标题和默认icon图片 已测试:APP 微信 QQ 支付宝 淘宝 安装 npm install vue-wechat-title --save 用法 1.在main.js中引入 impor

  • 解决vue单页面修改样式无法覆盖问题

    当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局. 比如: <style scoped> .example { color: red; } </style> <template> <div class="example">hi<

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

随机推荐