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

通过this.$router.replace改变当前页面路由地址(单纯改变页面地址页面是不刷新的)结合this.reload()刷新当前页面
vue路由参数变更刷新当前页面_第1张图片

  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()需要在父组件内先定义(可自行百度)



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

不建议用一些强制刷新的方式,会导致页面空白用户体验度不好,刚接触vue,有什么更好的方案欢迎留言贴代码呀

你可能感兴趣的:(前端,vue.js)