用真实世界的案例剖析 Vue.js 路由传参的两种方式

2023-09-24 22:56:29

前言

在现代 Web 开发中，单页面应用 (SPA) 已成为主流。SPA 允许用户在不重新加载整个页面的情况下在页面之间导航，从而提供了更流畅和响应更快的用户体验。Vue.js 是一个流行的 JavaScript 框架，它提供了许多特性来构建 SPA，其中之一就是路由。

Vue.js 路由允许您轻松地在页面之间导航，并通过 URL 来管理应用程序的状态。您可以在路由中传递参数，以便在不同的页面之间共享数据。在本文中，我们将探讨 Vue.js 路由传参的两种方式，并通过真实的案例来展示其用法和优缺点。

案例展示

为了更好地理解 Vue.js 路由传参的两种方式，我们先来看一个简单的案例。假设我们有一个三级路由，如下所示：

/users
/users/:id
/users/:id/profile

在这个路由中，/users 是父路由，/users/:id 是子路由，/users/:id/profile 是孙路由。我们可以通过在 URL 中传递参数来在这些路由之间传递数据。

方式一：使用 query 参数

使用 query 参数传递数据是最简单的方法。query 参数是 URL 中问号 (?) 后面的部分。例如，以下 URL 使用 query 参数传递了 id 和 name 参数：

/users?id=1&name=John Doe

要从 Vue.js 路由中获取 query 参数，可以使用 $route.query 对象。例如，以下代码从路由中获取 id 和 name 参数：

const id = this.$route.query.id;
const name = this.$route.query.name;

使用 query 参数传递数据的主要优点是简单易用。您只需要在 URL 中添加问号和参数即可。但是，使用 query 参数也有一个缺点，那就是参数是可见的。这意味着任何人都可以通过查看 URL 来看到参数的值。

方式二：使用 params 参数

使用 params 参数传递数据也是一种常见的方法。params 参数是 URL 中冒号 (:) 后面的部分。例如，以下 URL 使用 params 参数传递了 id 和 name 参数：

/users/1/John Doe

要从 Vue.js 路由中获取 params 参数，可以使用 $route.params 对象。例如，以下代码从路由中获取 id 和 name 参数：

const id = this.$route.params.id;
const name = this.$route.params.name;

使用 params 参数传递数据的主要优点是安全性。params 参数是隐藏的，这意味着其他人无法通过查看 URL 来看到参数的值。但是，使用 params 参数也有一个缺点，那就是它比使用 query 参数更复杂。您需要在路由配置中定义 params 参数，并且需要使用 $route.params 对象来获取参数的值。