vue路由跳转取消上个页面的异步请求
背景：我们经常会遇到当前页面未加载完毕时跳转路由或者返回操作, 但是通过network会发现, 若网络环境较差的情况下, 会一直pending, 切换路由后在network中添加新的请求但是正在pending的请求依然存在. 当我们在项目中做了一个上拉加载分页的时候会一直加载中, 用户等待不耐烦后可能会主动触发返回操作, 但是此刻即使用户触发返回操作, 加载分页的请求还是存在, 页面还是会一直提示加载中, 直到该请求加载成功或超时才肯罢休。最终给用户造成一些不必要的结果，同时也对web性能造成一定的影响。
那么如何解决这个问题呢，方法就是监听路由，在路由切换前将上个页面的请求取消。
第一步：
axios请求头设置
第二步：
利用vuex，新建一个store.js，将取消方法cancel放到数组中，然后在路由守卫中把数组中存有的cancel方法都执行
第三步：
监听路由
到此就可以解决路由跳转后上个页面的请求还在pending的状态啦
如果想去掉控制台的console.error
至此完美解决，亲测有效！！！
前端下载地址按路由跳转怎么办
热门频道
首页
博客
研修院
VIP
APP
问答
下载
社区
推荐频道
活动
招聘
专题
打开CSDN APP
Copyright © 1999-2020, CSDN.NET, All Rights Reserved
vue
打开APP
VUE怎么解决路由跳转时及跳转到外部链接,再返回的页面缓存问题 原创
2020-07-24 20:03:39
1点赞
阿权有想法
码龄4年
关注
本地路由跳转时,可以在app.vue中加入以下代码,即可解决本地路由跳转时的缓存问题
但是当跳转到外部链接时(不是本地项目)如百度,再返回时路由缓存就不管用啦,这不是vue的问题,是浏览器的问题,怎么解决这种情况呢?(记录下自己的心路历程)
第一种方法 用axios访问百度,但前提是解决跨域问题,网上有很多方法,但我一个都没成功,我太菜啦
第二种方法 本来我是打算在后端上记录路由跳转的数据,返回时再把这些数据传回来(VUE就是基于数据的)但发现这有悖前后端分离的初衷,前后端又掺杂在啦一起,那咋办呢,后来灵光一动,我为嘛不打开个新的标签页呢? 哈哈,打开新标签页,本页面不关闭,不就不用返回,这不就解决缓存问题啦
打开新标签页的代码
文章知识点与官方知识档案匹配
Vue入门技能树首页概览
21756 人正在系统学习中
打开CSDN，阅读体验更佳
vue页面跳转实现页面缓存操作
业务需求 打野在A页面野区进行一波骚操作打了一只蓝爸爸，然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸，然后他又回到A野区，希望A野区还是只有一只蓝爸爸被打的状态，其他野没被偷 第一步 在路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断，为true的是需要缓存的，false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子，在A野区离开时将值设置为false保证离开当前野区不被偷 第四步 在其他野区浪一波离开时设置为true,保证回到A野区的时候野区不被刷新，还是原来的状态 补充知识：vue keep – alive 使用只有从固
vue 跳转到外部 后回跳
微信 vue 跳转到外部 后回跳 ，比如登陆 授权操作 。需要 路由 先跳转到一个中间页面 后再跳转到授权服务器！而不能跳转前的页面与回跳后的页面相同 不然回跳可能会出现空白 路由不解析。 转载于:...
继续访问
[Vue] vue跳转外部链接
vue跳转外部链接 vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面。 var url = '' //跳转1 window.localtion.href = url //跳转2 window.history.pushState(url); window.history.replaceState(url); //跳转3 window.open(url,"_blank"); //跳转4 var a = document.createElement("a"); a.se
继续访问
最新发布 关于vue路由跳转后的页面不会刷新的解决办法
关于vue路由跳转后的页面不会刷新的解决办法
继续访问
【VUE】vue中实现路由跳转到外部链接界面
项目中用前端的是vue框架，有一个需求是，当点击一个按钮后，跳转到原来已经发布过的ionic界面上。如果是vue页面中的内部跳转，可以用this.$router.push()实现，但是如果我们还用这种方法跳到外部链接，就会报错，因为外部页面中是有HTTP等前缀的，那么我们如何跳转到外部链接呢，我们只需用 window.location.href = ‘url’来实现，具体代码如下： //在data...
继续访问
vue点开链接跳转到外网页面
查看页面中，跳转外网的链接 vue 完成，点GO就会跳转到外网的 页面 不过格式要是 http:// 这样的才行（链接可以是任意的） 可以使用 作者：鲨鱼辣椒灬 来源：CSDN ...
继续访问
使用vuex做页面缓存，当路由发生跳转的时候，跳转回的页面也是之前的离开的页面。（比如：从活动页面的第二页离开，再次回来的时候还是在第二页）
1、首先建立一个store文件夹，然后定义一个modules文件夹，在里面定义不同的页面模块，最后在store中暴露出来。 2、在每个定义的页面模块中，把需要被缓存的页面的页码记录下来。 3、页面使用 首先在页码公共组件中存下这个参数，然后在每个页面中调用这个signal函数，改变页码数。 里面的这个changePage函数是我在页面中拿来存页面页码改变的函数。 4、最后在列表中传参就传...
继续访问
vue中ios系统window.location后跳转外链后点击系统返回按钮后存在的问题
在实际开发中，在ios系统上出现了一个问题：当从外链页面B点击系统返回键到页面A时，路由钩子函数没有执行，同时created和mounted生命周期钩子中的部分代码也没有执行
继续访问
vue项目中 解决页面回退后 不缓存以及重复请求
需求：一级页面mounted或者created中发送页面请求获取数据渲染完成后，点击进入二级页面，当回退一级页面的时候再次重复请求。 解决方式三种： 一、缓存所有页面，在app.vue中使用keep-alive标签包裹动态路由 二、选择性缓存部分页面 1、使用router.meta属性，在app.vue中做选择性缓存判断 2、 router.js中如下设置： 3、使用vue-router 2.0的新特性，提供了include/exclude两个属性 可以针对性..
继续访问
vue项目上线路径跳转无效(404问题)
在近期做的一个小项目中，本地路由跳转没有任何问题，使用nginx部署上线后出现很多路由无法跳转的问题。经过一番研究，发现可以通过以下两种方式解决。 法一.将路由改为hash模式 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会向后端发出请求。 为什么hash模式下没有问题 router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login 它的特点在于：
继续访问
内部跳转(请求转发)和外部跳转(重定向)的区别?
总结归纳要点 1、内部跳转的时候实际上是通过服务器端将请求转发到另外的页面或者servlet中，这个时候跳转到的目标页面或者servlet可以获取到请求对象，也可以获取到请求中的属性和参数。而外部跳转的时候实际上是第一次请求后，服务器端向客户端发送了一个指令，让客户端再次请求了一次服务器端，这个时候服务器第二次拿到的request对象已经不是第一次请求的request对象了,所以无法获取到第一次请...
继续访问
热门推荐 vue项目中跳转到外部链接方法
当我们在文件中，如果是vue页面中的内部跳转，可以用this.$router.push()实现，但是如果我们还用这种方法跳到外部链接，就会报错，我们一看链接的路径，原来是我们的外部链接前面加上了这一串导致跳转出现问题，那么我们如何跳转到外部链接呢，我们只需用 window.location.href = ‘url’来实现，具体代码如下： span
继续访问
vue中跳转路由再次回到原页面，进行缓存相关问题
vue中跳转路由再次回到原页面，进行缓存相关问题
继续访问
微信小程序跳转到外部连接和外部链接跳回小程序
微信小程序跳转到外部连接和外部链接跳回小程序1、跳转外部连接1.1、新建一个页面wxml存放web-view组件（page1）1.2需要跳转的页面，跳转到page11.3添加业务域名1.3.1在域名服务器根目录上传微信验证文件1.3.2添加业务域名2、外部连接跳回微信小程序2.1 显示的HTML增加微信 JSSDK 的js代码2.2 如若是2.1用的是 wx.miniProgram.postMessage,会触发 web-view api 的 bindmessage 方法，在bindmessage 中跳转到
继续访问
解决 vue 路由跳转然后返回后 不缓存页面信息
需要使用 keep-alive实现。 问题1： 解决 vue 路由跳转然后返回后 不缓存页面信息 详见大神博客、写的超级清晰明了奥。： 两步即可完成。 （1）在router/index.js里面设置： { path: '/Form02', na...
继续访问
Vue跳转到另一页面后如何返回原来的页面
将跳转前的url路径编码后作为query参数传到另一页面中，在另一页面中解码参数获得跳转前的url路径，利用window.open()跳转回原来的页面。 2.解码
继续访问
Vue如何在原窗口与新窗口打开外部链接
Vue如何在原窗口与新窗口打开外部链接
继续访问
vue使用keep-alive在列表中进入详情页中返回后在进入其他详情页面发现还是上一次的详情，被缓存了如何解决呢
直接写重点：使用keep-alive如果你想页面不仅刷新页面还保存原来的搜索内容，则是要使用activated生命周期函数，那么用在什么地方呢，你在哪个周期函数里面去调用api获取数据的，就把那个周期函数给替换成activated就可以了，一般都是在created和mounted中获取数据，就直接用activated就可以了 ...
继续访问
【vue路由跳转外部链接】
vue-router跳转外部链接
继续访问
vue跳转外部链接
支持安卓 ios window.open
继续访问
vue
写评论
2
3
1
踩
分享
axios不能拦截403错误
这个在Vue中很简单的就解决了，直接引入router，然后router.push，但是在React中，我们要使用props.history.push进行跳转(不使用window.location.href = ‘/login’，但是怎么在axios.js中拿到props呢？又是个问题。
在axios中做统一拦截，在响应拦截中，判断后端返回的状态码code是否为403，403的话表示sessionId过期，我们需要让页面跳转到登录页面，凡是返回403有两种：
1、第一种是浏览器返回的403；
2、第二种是后端开发人员返回的403；
所以我们将响应拦截改成这样即可：
import axios from 'axios'
import https from 'https';
import { message } from "antd";
import eventBus from '@/utils/eventBus'
/**
* 如果有多个请求都是 403 就需要这个开关 来控制message的展示个数
* 展示一个之后 关闭阀门
*/
let messageFlag = false;
/**
* props是app.js页面传入的 this.props
* 用于路由跳转 当403的时候 进行路由跳转
*/
let props = "";
/**
* 当使用这个js的时候 会监听这个自定义事件
* 改变props的值
*/
eventBus.$on((propsObj) = {
props = propsObj
}, 'axiosInterceptorsFun')
const goLoginFun = () = {
if (messageFlag === false) {
message.warning("登录已过期，请重新登录！")
messageFlag = true
setTimeout(() = {
messageFlag = false
}, 2000)
props props.history.push('/login')
}
}
axios.defaults.timeout = 60000 * 5; //设置默认超时 10s
axios.defaults.withCredentials = true;
const instance = axios.create({
httpsAgent: new https.Agent({
rejectUnauthorized: false,
})
});
instance.interceptors.response.use(function (response) {
console.log(response, "接口返回")
let { data: { code } } = response
if (code === 403) {
goLoginFun()
return {}
}
return response
}, function (error) {
console.log(error.response, 'error1')
console.log(error.request, 'error2')
console.log(error, 'error3')
if (error.response) {
if (error.response.status == 403) {
goLoginFun()
}
return Promise.reject(error.response)
} else if (error.request) {
if (error.request.status == 403) {
goLoginFun()
}
return Promise.reject(error.request)
} else {
goLoginFun()
return Promise.reject(error.message)
}
})
登录后复制

主要是在这个js中我们监听了自定义事件axiosInterceptorsFun：
eventBus.$on((propsObj) = {
props = propsObj
}, 'axiosInterceptorsFun')
登录后复制
这个事件我们可以在app.js跟组件中进行挂载的时候监听触发：
import eventBus from '@/utils/eventBus'
componentDidMount() {
eventBus.$emit('axiosInterceptorsFun',this.props)
}
登录后复制
当跟组件实例化的时候，axios已经开始监听axiosInterceptorsFun这个事件，在app.js中触发，所以在axios.js中我们已经拿到了props这个对象，这个对象上有我们需要的路由跳转方法。
eventBus.js内容：
const eventBus = {
evnetList: [],
// 监听事件
$on(callbackFun, name) {
this.evnetList.push({
name,
callbackFun
})
},
//触发事件
$emit(name, data) {
this.evnetList.forEach(element = {
if (name === element.name) {
element.callbackFun(data)
}
});
},
}
export default eventBus
登录后复制

eventBus.js:
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2021-12-09 14:04:03
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-03-08 14:42:56
*/
const eventBus = {
evnetList: [],
// 监听事件
$on(callbackFun, name) {
// 同名事件 过滤
if (this.evnetList.length 0 this.evnetList.find(i = i.name === name)) {
this.evnetList = this.evnetList.filter(i = i.name !== name)
}
this.evnetList = [...this.evnetList, { name, callbackFun }]
},
//触发事件
$emit(name, data = '') {
if (!name) {
return false;
}
this.evnetList.forEach(element = {
if (name === element.name) {
element.callbackFun(data)
}
});
},
// 取消事件监听
$remove(name = "") {
// console.log(name, "取消事件监听")
this.evnetList = [...this.evnetList.filter(i = i.name !== name)]
}
}
export default eventBus
登录后复制

这篇文章是对eventBus的解释：
React非父子组件之间的事件传递
toke过期失效 ---提示并跳转到登录页面
token过期自动跳转到登录页面
设置token有效期为2小时，超过两小时 token失效 ，接口返回结果：{code:0,msg:'token过期',}
每次路由跳转都会对token进行判断，设置一个全局的beforeEach钩子函数，如果token存在就跳到你所需要的页面，否则直接跳转到登录页面，让用户重新存取token
全局路由钩子：router.beforeEach
router.beforeEach(async (to, from, next) = {
//获取token
const hasToken = getToken()
if (hasToken) {
//token存在，如果当前跳转的路由是登录界面
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({
path: '/'
})
} else {
//在这里，就拉去用户权限，判断用户是否有权限访问这个路由
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
}
} else {
//token不存在
if (whiteList.indexOf(to.path) !== -1) {
//如果要跳转的路由在白名单里，则跳转过去
next()
} else {
//否则跳转到登录页面
next(`/login?redirect=${to.path}`)
}
}
})
请求拦截 设置
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
//发送请求时把token携带过去
service.interceptors.request.use(
config = {
if (store.getters.token) {
config.headers['sg-token'] = getToken()
}
return config
},
error = {
console.log(error)
return Promise.reject(error)
}
)
//请求响应
service.interceptors.response.use(
response = {
console.log(response.data)
const res = response.data
// token过期，重返登录界面
if (res.code === 0) {
store.dispatch('user/logout').then(() = {
location.reload(true)
})
}
return res
},
error = {
Message({
message: error.msg,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service