玩转详情页参数传递，刷新不丢，稳如泰山

前端

2023-05-06 22:05:59

轻松搞定参数跳转，刷新不丢失

背景

日常开发中，经常需要跳转到详情页并携带必要信息，参数传递至关重要。然而，刷新页面后，参数往往会丢失，导致数据缺失，影响用户体验。本文将深入探讨两种解决此问题的秘籍，助你轻松应对携带参数跳转详情页的需求。

一、params方式传参

原理： 通过构造一个对象，将参数作为对象的属性，使用params作为参数名进行传递。

优点： 安全，不会暴露参数在URL中。

代码示例：

// 父组件
this.$router.push({
  name: 'detail',
  params: {
    id: 1,
    name: '张三'
  }
});

// 子组件
console.log(this.$route.params); // { id: 1, name: '张三' }

二、query方式传参

原理： 在URL后面拼接查询字符串，将参数以键值对的形式传递。

优点： 简洁，类似于GET请求传参。

缺点： 不安全，参数暴露在URL中。

代码示例：

// 父组件
this.$router.push({
  name: 'detail',
  query: {
    id: 1,
    name: '张三'
  }
});

// 子组件
console.log(this.$route.query); // { id: '1', name: '张三' }

示例代码

为了更清晰地理解，提供以下示例代码：

params方式传参：

// 父组件
<template>
  <button @click="gotoDetail">跳转详情页</button>
</template>

<script>
export default {
  methods: {
    gotoDetail() {
      this.$router.push({
        name: 'detail',
        params: {
          id: 1,
          name: '张三'
        }
      });
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <h1>{{ $route.params.id }}</h1>
    <p>{{ $route.params.name }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params);
  }
};
</script>

query方式传参：

// 父组件
<template>
  <button @click="gotoDetail">跳转详情页</button>
</template>

<script>
export default {
  methods: {
    gotoDetail() {
      this.$router.push({
        name: 'detail',
        query: {
          id: 1,
          name: '张三'
        }
      });
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <h1>{{ $route.query.id }}</h1>
    <p>{{ $route.query.name }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.query);
  }
};
</script>

常见问题解答

params和query传参的区别？

params传参安全，不暴露参数在URL中，而query传参则暴露参数在URL中。
刷新页面后参数丢失怎么办？

使用params或query方式传参，刷新页面后参数将保留。
如何判断参数是否存在？

通过this.$route.params或this.$route.query来判断是否存在。
参数可以传递复杂对象吗？

可以，但需要使用JSON.stringify()和JSON.parse()进行转换。
如何同时使用params和query传参？

同时使用this.$router.push({ name: 'detail', params: {}, query: {} })即可。