vue路由参数变更刷新当前页面
Sonder
2021-09-06
1022字
3分钟
浏览 (5k)
通过this.$router.replace改变当前页面路由地址（单纯改变页面地址页面是不刷新的）结合this.reload()刷新当前页面
1.通过this.$route.query.cart_ids获取当前路由参数
2.取出接口内需要去除的参数
3.路由参数过滤掉去除参数赋值（为了方便过滤我把字符串转成了数组split，数组过滤数组，过滤完记得转回字符串join）
// 后退时跳转到上上一页
this.$router.replace({
name: "submit_order",
query: {
cart_ids,//过滤后的参数
add_type: this.$route.query.add_type
}
},()=>{
this.reload();//刷新页面
})4.使用this.reload()需要在父组件内先定义（可自行百度）
<router-view v-if="isReloadAlive"></router-view>
export default {
provide() {
return {
reload: this.reload
}
},
data(){
isReloadAlive : true
},
methods: {
reload() {
this.isReloadAlive = false;
this.$nextTick(function(){
this.isReloadAlive = true;
})
}
}
//子组件使用时需先注册
export default {
name: "submit_order",
inject: ['reload'],
data(){...}
}不建议用一些强制刷新的方式，会导致页面空白用户体验度不好。