Vue2路由传参详解

1. 引言

Vue是一种用于构建用户界面的渐进式JavaScript框架，它提供了一个基于组件的开发模式，让开发者可以更方便地构建可复用的UI组件。而Vue的路由功能可以让我们根据不同的URL路径来显示不同的内容，实现单页应用（SPA）的效果。

在Vue的路由功能中，传参是非常常见和重要的一个需求。本文将详细介绍Vue2中路由传参的几种常见方式，并给出示例代码以及对应的运行结果。

2. 路由传参的方式

在Vue2中，可以利用路由传参来传递数据给目标组件。下面是几种常见的路由传参方式：

2.1 动态路由参数

Vue的动态路由参数是一种常用的路由传参方式。通过在路由的路径中使用:来定义动态参数，然后通过$route对象的params属性来获取传递的参数。

// 定义动态路由
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 获取动态参数
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

使用动态路由参数时，传递参数的方式如下所示：

<!-- 传递动态参数给/user/123 -->
<router-link :to="'/user/' + userId">User</router-link>

示例代码运行结果：

URL路径: /user/123
页面显示: User 123

2.2 查询参数

查询参数是通过URL的查询字符串来传递的。在Vue的路由中，可以通过$route对象的query属性获取查询参数。

// 定义带查询参数的路由
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

// 获取查询参数
const User = {
  template: '<div>User {{ $route.query.id }}</div>'
}

通过<router-link>组件传递查询参数如下所示：

<!-- 传递查询参数给/user?id=123 -->
<router-link :to="{ path: '/user', query: { id: 123 }}">User</router-link>

示例代码运行结果：

URL路径: /user?id=123
页面显示: User 123

2.3 命名路由

Vue的命名路由是一种为路由定义名称的方式，可以方便地在代码中进行跳转和传参。在定义路由时，通过给路由定义一个name属性就可以使用命名路由。

// 定义命名路由
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'user',
      component: User
    }
  ]
})

// 使用命名路由跳转并传递参数
this.$router.push({ name: 'user', params: { id: 123 }})

接收命名路由传参的方式与动态路由参数相同。

示例代码运行结果：