路由传参后去除路由中参数

最新推荐文章于 2024-04-26 18:03:35 发布

liuxi_happy

最新推荐文章于 2024-04-26 18:03:35 发布

阅读量1.4k

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/liuxi_happy/article/details/125888331

版权

// 今天有个需求，从主页面点击带着参数跳转到另一个页面，把参数当作这个页面的查询条件，结果导致该页面点击清除查询条件按钮时，还会附带之前的参数
// 解决方法
/ 清空查询条件
            clearForm(){
                this.$refs['form'].resetFields()
                 this.$router.push(
                    {
                        path:'/alarmList',
                    }
                    ) // 在执行清空查询条件的时候重置路由
                this.getSafetyOverviewList()
            },

// 顺便写一下路由传参
// 主页面
 <el-tooltip class="item" effect="dark" content="详情" placement="top">
     <svg t="1657268100880" @click="urgentJump(4)" class="mor_info" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2647" width="200" height="200"><path d="M512 1011.2a496.384 496.384 0 0 0 448.3072-279.296 38.4 38.4 0 0 0-68.9664-33.8944A420.0448 420.0448 0 0 1 512 934.4c-232.9088 0-422.4-189.4912-422.4-422.4S279.0912 89.6 512 89.6s422.4 189.4912 422.4 422.4a38.4 38.4 0 0 0 76.8 0c0-275.2512-223.9488-499.2-499.2-499.2S12.8 236.7488 12.8 512s223.9488 499.2 499.2 499.2z" fill="#d81e06" p-id="2648"></path><path d="M760.4224 537.6a38.4 38.4 0 0 0-38.4-38.4h-460.8a38.4 38.4 0 0 0 0 76.8h460.8a38.4 38.4 0 0 0 38.4-38.4zM261.2224 378.8288h307.2a38.4 38.4 0 0 0 0-76.8h-307.2a38.4 38.4 0 0 0 0 76.8zM261.2224 696.3712a38.4 38.4 0 0 0 0 76.8h204.8a38.4 38.4 0 0 0 0-76.8h-204.8z" fill="#d81e06" p-id="2649"></path><path d="M711.5776 340.4288m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#d81e06" p-id="2650"></path></svg>
</el-tooltip> // 点击图标跳转
// 方法
 urgentJump(val){
        this.$router.push(
          {
            path:'/alarmList',
            query:{
              level:val
            }
          }
        )
      }, // 路由跳转，带着参数
      // 跳转后的页面
       created(){
            console.log(this.$route.query)
            this.form.level = this.$route.query.level
        }, // 在初始化的时候就收路由参数，并且赋值