当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题

问题描述：项目有这个需求，当页面的输入框内容填完之后，如果没有点提交审核就退出该页面就给他个弹窗提示是否退出
思路:用组件内的路由守卫，在离开组件时判断是否点击过提交审核，这边用一个状态判断，0或1，代码如下:

beforeRouteLeave(to, from, next) {// 在导航离开渲染该组件的对应路由时调用// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`if (this.type === "input" && this.isCheck && this.isSkip === 0) {//这里面是**录入**的时候**点了解析预览**，但是**没有点提交审核**时，出现弹窗this.$confirm("你已经预结算预览还未提交审核，确定要离开吗?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {next();}).catch(() => {this.$message({type: "info",message: "已取消",duration: 2000,});next(false);});} else {next();}},

上面的代码可以解决大部分需求，比如点击其他页面时，确实会出现弹窗，但是项目里面加了一个返回上一页按钮，是用this.$router.back()实现的,当点击返回上一页按钮时，页面会闪烁一下，出现了弹窗又消失了，浏览器上面的网址变成了上一页的地址，但是页面还是这个页面，后面又换了this.$router.go(-1)和history.back(),都会出现这个问题。

最后解决：在弹窗外面加个setTimeout完美解决页面闪烁和跳转页面错误。
代码如下：

beforeRouteLeave(to, from, next) {// 在导航离开渲染该组件的对应路由时调用// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`if (this.type === "input" && this.isCheck && this.isSkip === 0) {//这里面是录入的时候点了解析预览，但是没有点提交审核时，弹窗setTimeout(() => {this.$confirm("你已经预结算预览还未提交审核，确定要离开吗?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {next();}).catch(() => {this.$message({type: "info",message: "已取消",duration: 2000,});next(false);});}, 1);} else {next();}},

当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题相关推荐

vue router返回上一页
this.$router.go(-1) 不用router时,使用window.history.go(-1); 转载于:https://www.cnblogs.com/duanzhenzhen/p/10 ...
Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的) 可用的配置 API beforeRouteEnter 在渲染该组件的对应路由被验证前调用. 此时不能获取组件实例 this , 因为当守卫执行 ...
Vue Router路由守卫
全局前置.后置路由守卫 router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import List f ...
vue路由跳转返回上一级 this.$router.go(-1) 和返回到指定页面this.$router.push('/home')...
1,点击返回上一页<button @click="goback">goback</button> methods:{ goback(){} this.$ro ...
Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
react router 路由守卫_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式: hash 模式 history 模式 hash 模式路由原理: 我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进 ...
this.$router.go()和this.$router.push()的区别
this.router.go()和this.router.go()和this.$router.replace的差别 this.$router.go(val) 介绍: 在history记录中前进或者后退 ...
解决$router.go(-1)返回上一层页面不刷新页面问题
原因:页面没有跳转过去,但网址已经跳转过去了,这个原因是因为他没有进行缓存,所以页面没有进行及时的渲染. 方案一 //先在router/index.js中添加路由元信息,设置需要缓存的页面 route ...
reactrouter4路由钩子_react router @4 和 vue路由详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...

当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题

当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题

当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题相关推荐

最新文章

热门文章