解决vue 跳转相同路由携带不同参数，页面不渲染问题

项目中遇到跳转详情，但是详情中侧边有小列表的存在，这样就是相当于从详情跳到详情，如果直接使用this.router.push的方式，则会发现页面不会重新渲染，写在created和mounted内的方法并不会执行，解决这个问题的方式如下：路由监听一、watch：在方法里面还是使用this.router.push的方式，则会发现页面不会重新渲染，写在created和mounted内的方法并不会执行，解决这个问题的方式如下：路由监听一、watch：在方法里面还是使用this.router.push的方式，则会发现页面不会重新渲染，写在created和mounted内的方法并不会执行，解决这个问题的方式如下：路由监听一、watch：在方法里面还是使用this.router.push进行跳转，但是添加路由监听：

watch: {// 利用watch方法检测路由变化：$route: function(to, from) {if (to.fullPath !== from.fullPath) {this.currentPage = this.$route.query.code;//获取参数}}
}

到这里基本上可以使页面数据进行重新渲染了，但是连续点击同一条两次的话，则会报下面的错误：
Uncaught (in promise) Error: Avoided redundant navigation to current location:“《当前页面的地址》”
为了解决这个问题，可以在路由文件内添加如下代码：

//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}

二、beforeRouteUpdate
其实和方法一是一样的，也是监听路由，点击同样的路由报上面错误解决方式也是一样的。

beforeRouteUpdate (to, from, next) {next();if (to.fullPath !== from.fullPath) {this.currentPage = this.$route.query.code;}
},

即可实现跳转携带不同参数跳转相同路由的需求。

解决vue 跳转相同路由携带不同参数，页面不渲染问题相关推荐

Vue 跳转相同路由携带不同参数，而页面不刷新
由于组件是复用的,若要对路由参数的变化作出响应的话,就需要在此组件上使用 watch(监测变化) $route 对象 created() {this.listQuery.code = this.$ro ...
解决vue跳转同一路由报错问题
vue中,如果跳转同一个页面路由,虽不会影响功能,但是会报错原因:路由的push会向历史记录栈中添加一个记录,同时跳转同一个路由页面,会造成一个重复的添加,导致页面的报错解决方案:在router的 ...
vue跳转相同路由不刷新问题
在hash模式下 vue跳转相同路由的时候页面不会刷新,使用场景往往是点击头部导航,需要页面进行刷新当前页面. 解决问题: 1.在app.vue里面在data里面添加isReload变量,在rou ...
hach vue 跳转_Vue路由实现、路由导航、路由模式
1.$router和$route区别 router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象,和router-link跳转一样,this. ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
解决Vue跳转到当前路由报错问题
一.问题背景官网首页Herder鼠标悬浮有很多二级页面,点击二级页面会进行跳转,当我已经在一个二级页面时,点击顶部导航中当前二级页面的其中一个状态(其实可以用三级页面,但是因为内容不多,我将一些内容 ...
vue跳转同一路由页面不跳转
问题: 路由跳转了, 但是页面数据没有改变, 必须要刷新一下才可以改变分析: 虽然地址改变了,但是页面只会创建一次,不会再次去发送请求,setup只会执行一次,导致页面不会刷新解决: 只需要给&l ...
解决vue重复点击路由报错问题:Uncaught (in promise) NavigationDuplicated
直接在路由router文件夹下加上下面代码: import routes from './router'方法一: const originalPush = Router.prototype.push ...
解决vue跳转页面不刷新问题
1.问题: 我们常常需要使用$router.go(-1)返回之前的页面,但是却发现, 之前的界面,保持着上次跳转的状态2.原因: 使用$router.go(-1)返回,之前的数据都保留,并未刷新原来的 ...

解决vue 跳转相同路由携带不同参数，页面不渲染问题

解决vue 跳转相同路由携带不同参数，页面不渲染问题相关推荐

最新文章

热门文章