vue路由参数变更刷新当前页面

通过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(){...}
}

不建议用一些强制刷新的方式，会导致页面空白用户体验度不好。

转自：https://segmentfault.com/a/1190000021268826

vue路由参数变更刷新当前页面

💬 COMMENT

👋友