Vue路由跳转与参数传递详解

在 Vue.js 中，路由是实现单页面应用（SPA）的关键组件之一。本文将探讨如何通过 vue-router 实现页面之间的跳转，并详细介绍如何在跳转过程中传递参数，以及如何在目标组件中接收这些参数。

一、路由跳转

1. 使用 router-link 进行跳转

router-link 是 Vue Router 提供的一个内置组件，用于替代 HTML 的 a 标签来创建导航链接。它可以接受一个字符串或一个对象作为 to 属性的值。

• 字符串形式：直接指定目标 URL 地址。
  展示用户
• 对象形式：可以包含路径、名称和其他参数。
  用户管理

注意：当使用对象形式时，可以通过 v-bind 简写为 : 来绑定动态值。

2. 编程式路由跳转

除了使用 router-link，还可以通过编程的方式进行路由跳转，主要通过 $router.push() 方法实现。

this.$router.push({ path: '/home', query: { id: '1' } });

this.$router.push({ name: 'home', query: { id: '1' } });

this.$router.push({ name: 'home', params: { id: '1' } });

二、路由传参

Vue Router 支持两种主要的传参方式：query 和 params。

1. 使用 query 传参

query 参数会附加在 URL 后面，类似于 GET 请求。这种方式适合传递非敏感数据，因为参数会显示在浏览器的地址栏中。

2. 使用 params 传参

params 参数不会显示在 URL 中，类似于 POST 请求。这种方式适合传递敏感数据，但需要注意的是，如果页面被刷新，params 参数将会丢失。

query 与 params 的区别

• params 传参必须使用 name 而不是 path；
• query 传参既可以使用 name 也可以使用 path；
• params 传参不会显示在 URL 中，刷新页面后会丢失；
• query 传参会显示在 URL 中，适合传递非敏感数据。

三、参数的接收

在目标组件中接收参数，可以通过 $route 对象访问。

1. 接收 query 参数

userId = this.$route.query.id; // 接受 query 里的参数并赋值给 userId

2. 接收 params 参数

userId = this.$route.params.id; // 接受 params 里的参数并赋值给 userId

此外，还可以传递复杂对象作为参数：

student = { id: 1, name: 'wj' };

查询

student2 = this.$route.params; // 接受 params 里的参数并赋值给 student2