Vue跳转页签传参并查询参数的方法是什么

在Vue.js开发中，页面跳转和参数传递是非常常见的需求。特别是在多页签的应用场景中，如何在跳转时传递参数，并在目标页面中获取这些参数，是一个需要掌握的基本技能。本文将详细介绍如何在Vue中实现页签跳转并传递参数，以及如何在目标页面中查询这些参数。

1. 使用router-link进行页面跳转并传递参数

Vue Router提供了router-link组件，用于在Vue应用中进行页面跳转。我们可以通过router-link的to属性来指定目标路由，并通过query或params属性来传递参数。

1.1 使用query传递参数

query参数会以?key=value的形式附加在URL后面，适合传递一些非敏感的参数。

<router-link :to="{ path: '/target', query: { id: 123, name: 'vue' } }">
  跳转到目标页面
</router-link>

在目标页面中，可以通过this.$route.query来获取这些参数：

export default {
  mounted() {
    const id = this.$route.query.id; // 123
    const name = this.$route.query.name; // 'vue'
    console.log(id, name);
  }
}

1.2 使用params传递参数

params参数不会显示在URL中，适合传递一些敏感的参数。

<router-link :to="{ name: 'target', params: { id: 123, name: 'vue' } }">
  跳转到目标页面
</router-link>

在目标页面中，可以通过this.$route.params来获取这些参数：

export default {
  mounted() {
    const id = this.$route.params.id; // 123
    const name = this.$route.params.name; // 'vue'
    console.log(id, name);
  }
}

2. 使用this.$router.push进行编程式导航

除了使用router-link，我们还可以通过this.$router.push方法在JavaScript代码中进行页面跳转并传递参数。

2.1 使用query传递参数

this.$router.push({ path: '/target', query: { id: 123, name: 'vue' } });

在目标页面中，同样可以通过this.$route.query来获取参数。

2.2 使用params传递参数

this.$router.push({ name: 'target', params: { id: 123, name: 'vue' } });

在目标页面中，可以通过this.$route.params来获取参数。

3. 在目标页面中查询参数

无论是通过query还是params传递的参数，都可以在目标页面的mounted或created生命周期钩子中通过this.$route.query或this.$route.params来获取。

3.1 查询query参数

export default {
  mounted() {
    const id = this.$route.query.id;
    const name = this.$route.query.name;
    console.log(id, name);
  }
}

3.2 查询params参数

export default {
  mounted() {
    const id = this.$route.params.id;
    const name = this.$route.params.name;
    console.log(id, name);
  }
}

4. 注意事项

• params参数不会显示在URL中：如果你希望参数显示在URL中，应该使用query参数。
• params参数需要命名路由：在使用params传递参数时，目标路由必须是一个命名路由（即使用name属性定义的路由）。
• 参数的类型：query和params参数都是字符串类型，如果需要传递其他类型的数据，需要在目标页面中进行类型转换。

5. 总结

在Vue中实现页签跳转并传递参数，可以通过router-link或this.$router.push方法来实现。使用query参数可以将参数显示在URL中，而使用params参数则不会显示在URL中。在目标页面中，可以通过this.$route.query或this.$route.params来获取这些参数。掌握这些方法，可以让你在Vue开发中更加灵活地处理页面跳转和参数传递的需求。