vue 在当前页面跳转,修改url地址参数并强制刷新页面 reload
在当前页面携带参数刷新当前页面,使用 vue 的 provide / inject 组合去强制刷新页面
·
描述:
在页面A,点击页面A中的某个按钮,携带参数刷新当前页面A。
原因:
在当前页面跳转到当前页面,相当于 “重复点击选中的导航” 这一操作,通常都会在 router.js 中设置一下代码,使用 $router.replace()、$router.push() 在同一个页面做刷新跳转动作会没有效果。
//重复点击选中的导航时报错问题
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
return routerPush.call(this, location).catch(error => error);
}
const routerReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location) {
return routerReplace.call(this, location).catch(error => error);
}
解决办法:
app.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: "app",
provide (){
return {
reload: this.reload
}
},
data(){
return {
isRouterAlive: true
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
}
</script>
要刷新的页面:
this.$router.replace({
path: "/device/history",
query: {"showHelp":2}
},()=>{
that.reload();//刷新页面
})
参考:
其他:
更多推荐
已为社区贡献2条内容
所有评论(0)