编程小课堂 | Vue-Router 深度解析：领悟路由传参的艺术

在 Vue.js 中，路由无疑是构建单页面应用的关键元素之一。Vue-Router 作为一款强大的路由库，为我们提供了灵活便捷的路由管理方案。而路由传参则是其中不可或缺的一部分，它允许我们在路由之间传递数据，实现组件之间的通信。

在本文中，我们将深入探索 Vue-Router 中的路由传参，从 URL 传参的三种方式到 props 解耦传参的精妙之处，再到 route 和 router 的奥妙，层层递进，步步精彩。

URL 传参的三种方式

URL 传参是最简单直接的路由传参方式，它可以通过在 URL 中附加查询参数的形式实现。查询参数由问号 (?) 和参数键值对组成，参数键值对之间用 & 符号分隔。

1. 基本用法

基本用法是最常见的 URL 传参方式，它只需在 URL 后面加上问号 (?)，然后依次添加参数键值对，即可实现数据的传递。例如：

/user?id=1&name=张三

这个 URL 表示我们要访问 /user 路由，并传递两个参数：id 为 1，name 为 "张三"。

2. 数组传递

当我们需要传递一个数组时，可以在参数值后面加上方括号 ([])，然后依次添加数组元素。例如：

/products?ids[]=1&ids[]=2&ids[]=3

这个 URL 表示我们要访问 /products 路由，并传递一个数组，其中包含三个元素：1、2、3。

3. 对象传递

当我们需要传递一个对象时，可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串，然后将其作为参数值传递。例如：

/user?data={"id":1,"name":"张三"}

这个 URL 表示我们要访问 /user 路由，并传递一个对象，其中包含两个属性：id 为 1，name 为 "张三"。

props 解耦传参的三种类型

除了 URL 传参之外，Vue-Router 还提供了 props 解耦传参的方式，它可以将路由参数解耦到组件的 props 中，从而实现组件之间的数据传递。props 解耦传参主要有三种类型：

1. 路由 props

路由 props 是最简单的一种 props 解耦传参方式，它只需在路由配置中定义 props 属性，即可将路由参数映射到组件的 props 中。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: {
        id: (route) => route.params.id
      }
    }
  ]
})

在这个例子中，我们定义了一个 /user/:id 路由，并将其映射到 User 组件。同时，我们在 props 属性中定义了一个 id prop，该 prop 的值通过一个函数从路由参数中获取。

2. Query props

Query props 允许我们将 URL 查询参数映射到组件的 props 中。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      props: (route) => ({
        id: route.query.id,
        name: route.query.name
      })
    }
  ]
})

在这个例子中，我们定义了一个 /user 路由，并将其映射到 User 组件。同时，我们在 props 属性中定义了一个函数，该函数从路由查询参数中获取 id 和 name prop 的值。

3. 全局 props

全局 props 允许我们将路由参数映射到所有组件的 props 中。例如：

const router = new VueRouter({
  globalProps: {
    id: (route) => route.params.id,
    name: (route) => route.query.name
  }
})

在这个例子中，我们定义了两个全局 props：id 和 name，它们的值分别从路由参数和 URL 查询参数中获取。这样，所有组件都可以通过 this.route.params 和 this.route.query 访问这些 props。

route 与 router 的妙用

在 Vue-Router 中，route 和 router 是两个非常重要的对象，它们提供了丰富的 API，可以帮助我们轻松地获取和操作路由信息。

1. $route

route 对象包含了当前路由的信息，包括路由路径、参数、查询参数等。我们可以通过 route.path、route.params、route.query 等属性获取这些信息。例如：

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

2. $router

router 对象提供了路由操作的方法，包括跳转路由、替换路由、获取当前路由等。我们可以通过 router.push()、router.replace()、router.currentRoute 等方法来操作路由。例如：

this.$router.push('/user/1');
this.$router.replace('/user/1');
const currentRoute = this.$router.currentRoute;

结语

路由传参是 Vue-Router 中一项重要的功能，它使我们能够在路由之间传递数据，实现组件之间的通信。本文详细介绍了 URL 传参的三种方式和 props 解耦传参的三种类型，并深入剖析了 route 和 router 的妙用。希望这些知识能够帮助你更加熟练地使用 Vue-Router，构建出更加强大的单页面应用。