Vue - 动态修改路由的params和query参数

Posted 2022-12-11 WHOVENLY

在开发过程中，我们可能会遇到如下情况：B页面需要通过路由携带的参数进行一些判断，如果此时在B页面中修改了该值，但是此时刷新页面该参数的值未变，这是因为页面刷新后，该值的值会等于路由中传递来的值，所以我们要在B页面中修改该值的时候，同时要把路由中的该值也进行修改，这时刷新页面后获取到的也是最新值，接下来我们就来看看如何修改路由的params和query参数吧。

假设如今需要重置路由中params中的name值，那么我们只需重置路由参数：首先将原本的参数添加，再添加想要修改的参数或者是添加的参数。如下所示操作

this.$router.push(
  	params: ...this.$route.params, name:this.name  
)

同理，得query参数的修改如下所示：

this.$router.push(
    query: ...this.$route.query, name:this.name 
)

仅以上述示例可能会抽象一些，所以这里我再以一个改变query参数的案例为例：
组件A：点击【跳转至B页面】按钮时，携带了requestData对象数据到B页面

<template>
  <div id="a-page">
    <button @click="jump()">跳转至B页面</button>
  </div>
</template>

<script>
export default 
  name: "A",
  data() 
    return 
      requestData:
          name:'A页面',
          status:true,
      
    ;
  ,
  methods: 
    jump() 
      this.$router.push(
        path: '/BPage',
        query: this.requestData,
      );
    ,
  ,
;
</script>

<style lang='less' scoped>
.a-page 

</style>

B页面：为status赋值为路由中的status值，并通过该值判div元素的显隐。

<template>
  <div id="b_page">
    <button @click="editStatus()">隐藏div元素</button>
    <div v-if="status">我是div元素</div>
  </div>
</template>

<script>
export default 
  name: "bPage",
  data() 
    return 
      status: JSON.parse(this.$route.query.status),
    ;
  ,
  methods: 
    editStatus() 
      this.status = false;
    ,
  ,
;
</script>

<style lang='less'>
</style>

由A页面进入B页面时，页面展示：
因为A页面传值到B页面的status为true，所以元素div在页面中显示。

点击【隐藏div元素】后，页面展示：
因为点击隐藏div元素后，B页面中的status值变为false，此时元素div在页面中隐藏。

刷新页面后页面展示：
点击刷新后，status的值又变成了路由中携带来的值为true，所以此时素div在页面中显示。

如果需要在该变status值的时候，同步到刷新时也是最新的值，而不是从路由中携带而来的旧值，那么需要在改变status值的时候，也将路由中携带的status值改变，这样刷新页面后就可以为最新的值了。
需要改写B页面中editStatus方法，具体做法：

methods: 
    editStatus() 
      this.status = false;
      this.$router.push(
        query:...this.$route.query,status:this.status
      )
    ,
,