如何处理vue router 路由传参刷新页面参数丢失

处理Vue Router路由传参刷新页面参数丢失的攻略非常重要，下面是完整的步骤以及代码示例。

1. 使用query传参

在路由中使用query传参，是一种非常常见的方法。但是在使用query传参的时候，需要注意以下几点：

• 如果地址栏中存在多个参数，为了避免参数重叠，参数名最好使用前缀的方式，例如"user_id=12"可以更改为"user[id]=12"或者"user_id=12&"为"user[id]=12&"。
• 如果需要刷新页面，可以在地址栏中手动输入query参数，但是如果参数较多，这种方式显然不够优雅，因此可以在页面中使用方法$router.replace()或者$router.push()来进行跳转，并传入参数。

示例代码如下：

<template>
  <div>
    <router-link :to="{ path: '/user/detail', query: { id: user.id } }">查看详情</router-link>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          id: 1,
          name: '小明'
        }
      }
    }
  }
</script>

在这个例子中，我们定义了一个user对象，其中包含属性id和name。我们通过在router-link标签中使用query传递id参数，来进行页面跳转。

2. 使用params传参

在路由中使用params传参，直接在路由中添加一个params属性，如下所示：

{
  path: '/user/detail/:id',
  name: 'userDetail',
  component: UserDetail
}

在这个例子中，我们在路由中定义了一个名为id的params，其中值为一个数值。在使用params传参时，我们可以通过$router.replace()或者$router.push()来进行跳转。但与query传参不同的是，在使用params传参时，我们需要注意以下几点：

• params传参只能通过程序跳转，而不能手动输入参数。
• 必须通过该组件的$route.params来获取参数值。

示例代码如下：

<template>
  <div>
    <router-link :to="{ path: '/user/detail/' + user.id }">查看详情</router-link>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          id: 1,
          name: '小明'
        }
      }
    }
  },
  methods: {
    goToDetail() {
      this.$router.push({ name: 'userDetail', params: { id: this.user.id } })
    }
  }
</script>

在这个例子中，我们同样定义了一个user对象，包含id和name属性。我们通过在router-link标签中利用字符串拼接的方式传递了id参数，和使用方法$router.push()传递params参数，来进行页面跳转。

3. 处理参数丢失

上述示例中，我们通过使用query和params传参，但是在刷新页面后，参数往往会丢失，因为参数只存在于地址栏中，而并不会存在于浏览器的内存中。

我们可以利用localStorage来将参数存储在浏览器的缓存中，当页面刷新后，再将参数取回。同时为了避免页面刷新时无法传递参数，我们还需要在created钩子中对这些参数进行处理。

示例代码如下：

<template>
  <div>
    <router-link :to="{ path: '/user/detail', query: { id: user.id } }">查看详情</router-link>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          id: 1,
          name: '小明'
        },
        queryParams: {
          id: ''
        }
      }
    },
    created() {
      if (localStorage.getItem('queryParams')) {
        this.queryParams = JSON.parse(localStorage.getItem('queryParams'))
      }
      this.queryParams.id = this.$route.query.id || this.queryParams.id
      localStorage.setItem('queryParams', JSON.stringify(this.queryParams))
    }
  }
</script>

在这个例子中，我们在data属性中添加了queryParams对象，用于存储我们需要传递的参数。在created钩子中，我们首先通过localStorage来获取之前缓存的参数值，然后使用$this.$route.query.id || this.queryParams.id来判断用户是否输入了参数。最后再将处理过后的参数存储回localStorage中。

通过这种方式，我们可以在页面刷新时，保留参数值。同时，在进行页面跳转时，我们依然使用query或者params传参的方式。