0

    vue修改当前页面query参数

    2023.04.27 | admin | 221次围观

    最近在项目中手写分页器(为什么手写html页面回退强制刷新,因为对分页器样式外观要求比较严苛),遇到一个需求,就是我们在点击分页的时候,再进入详情,之后回退希望能够回到之前的页码值。

    解决这个需求,个人总结了两种方法。

    1:对标百度,不知道大家有没有发现 百度在进入详情页采取的方式是新开一个页面,这样我们回退到列表页的时候,页码值保持不变。

    这是一种可取的简单的方式,实现思路为:

    生成一个a链接,然后指定a的href属性和target属性,再模拟a的点击事件即可!

    2:但是有时候我们的甲方不想新开页面怎么办,这里就可以通过修改vue的query参数来实现。

    2-1:我们在进入这个列表页的时候html页面回退强制刷新,给一个初始默认值,例如:page=1

    不用担心页面路由问题,只要问号前面的路由是对的,不影响页面跳转

    2-2:我们需要在分页器事件的时候改变浏览器中的query值

    其中的currentPage是我们当前的页码值,我们就是将它赋值给我们的query里面的参数

    从而实现点击分页器,就能动态的改变路径中的值。

    
            const query=JSON.parse(JSON.stringify(this.$route.query))
            query.page=this.currentPage//你的分页器页码值变量
            this.$router.push({ path: this.$route.path, query })

    这样我们在点击进入详情页后,回退依旧是当前的页码值,之后大家判断调接口就好了!

    最后谢谢大家,如果能帮助到你,希望你回来帮我点个赞!

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论