首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

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

Sonder
2021-09-06
1022字
3分钟
浏览 (5.9k)

通过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

下一篇 / 20个简洁的 JS 代码片段

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)