【Vue实现参数传递：查询参数 vs. 动态路由】

文章目录

查询参数传递
- [1. 什么是查询参数？](#1. 什么是查询参数？)
- [2. 在Vue中使用查询参数](#2. 在Vue中使用查询参数)
- - [步骤 1：在路由配置中定义查询参数](#步骤 1：在路由配置中定义查询参数)
  - [步骤 2：在组件中使用查询参数](#步骤 2：在组件中使用查询参数)
  - [步骤 3：在页面中生成链接](#步骤 3：在页面中生成链接)
- [3. 查询参数传递的优势](#3. 查询参数传递的优势)
动态路由传递
- [1. 什么是动态路由？](#1. 什么是动态路由？)
- [2. 在Vue中使用动态路由](#2. 在Vue中使用动态路由)
- - [步骤 1：在路由配置中定义动态路由](#步骤 1：在路由配置中定义动态路由)
  - [步骤 2：在组件中使用动态路由参数](#步骤 2：在组件中使用动态路由参数)
  - [步骤 3：在页面中生成链接](#步骤 3：在页面中生成链接)
- [3. 动态路由传递的优势](#3. 动态路由传递的优势)

查询参数传递

1. 什么是查询参数？

查询参数是一种将数据附加到URL的方式，通常出现在问号（?）后面，用于传递信息。例如：/search?keyword=vue&page=1，其中keyword和page就是查询参数。

2. 在Vue中使用查询参数

Vue Router允许你在路由中定义查询参数，这样就可以在不同组件之间传递数据。

步骤 1：在路由配置中定义查询参数

javascript 复制代码

const routes = [
  {
    path: '/search',
    component: SearchComponent,
    props: (route) => ({ keyword: route.query.keyword, page: route.query.page })
  }
]

步骤 2：在组件中使用查询参数

vue 复制代码

<template>
  <div>
    <h1>搜索结果</h1>
    <p>关键词：{{ keyword }}</p>
    <p>页码：{{ page }}</p>
  </div>
</template>

<script>
export default {
  props: {
    keyword: String,
    page: Number
  }
}
</script>

步骤 3：在页面中生成链接

vue 复制代码

<router-link :to="{ path: '/search', query: { keyword: 'vue', page: 1 } }">搜索Vue</router-link>

3. 查询参数传递的优势

适合传递多个参数。
URL可读性好，参数明确。

动态路由传递

1. 什么是动态路由？

动态路由是通过路由的路径中的占位符来传递参数的方式。例如：/user/:id，其中:id是动态的，可以根据实际情况传递不同的值。

2. 在Vue中使用动态路由

Vue Router允许定义动态路由。

步骤 1：在路由配置中定义动态路由

javascript 复制代码

const routes = [
  {
    path: '/user/:id',
    component: UserProfileComponent,
    props: true
  }
]

步骤 2：在组件中使用动态路由参数

vue 复制代码

<template>
  <div>
    <h1>用户详情</h1>
    <p>用户ID：{{ id }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: String
  }
}
</script>

步骤 3：在页面中生成链接

vue 复制代码

<router-link :to="'/user/' + userId">查看用户详情</router-link>

3. 动态路由传递的优势

优雅简洁，适合传递单个参数。
参数直接嵌套在路由路径中，更符合RESTful设计风格。