(八)vue-router子路由、参数

发布网友

我来回答

共1个回答

热心网友

在 Vue.js 的应用中，路由参数的传递与获取是一个关键的环节，它直接影响到页面间的数据流动和状态管理。本文将深入探讨路由参数的两种主要形式：params 和 query，并通过实际代码示例演示它们的使用。

### 1. 路由参数的传递与获取

在 Vue.js 中，`this.$router` 和 `this.$route` 分别用于操作路由和访问路由信息。其中，`this.$router` 用于执行路由跳转和配置，而 `this.$route` 则用于获取当前路由的相关信息。

### 2. params 与 query 的区别

#### 2.1 params

参数 `params` 相当于 POST 请求，其参数不会出现在浏览器地址栏中。当配置路由时，必须明确指明参数名，并在跳转时通过 `params` 对象传递参数值。

**路由配置**：
{path: '/example/:paramName', name: 'Example', component: 'ExampleComponent'}

**传递参数**：
{name: 'Example', params: {paramName: 'value'}} >

**获取参数**：
this.$route.params.paramName

#### 2.2 query

参数 `query` 相当于 GET 请求，其参数值会显示在浏览器地址栏中。配置路由时无需指定参数名，但传递参数时需通过 `query` 对象。

**路由配置**：
{path: '/example/', name: 'Example', component: 'ExampleComponent'} >

**传递参数**：
{name: 'Example', query: {paramName: 'value'}} >

**获取参数**：
this.$route.query.paramName

### 3. 记忆技巧

为了方便记忆，建议在路由跳转时都使用 `name` 属性，这样可以更清晰地管理路由和参数。

### 4. 组件间传递参数示例

假设我们有两个组件，`Component1` 和 `Component2`，需要分别通过 `params` 和 `query` 传递参数。

**Component1** 使用 `params` 传递参数

**Component2** 使用 `query` 传递参数

运行结果

点击跳转到 `Component1` 页面，注意查看地址栏信息；

点击跳转到 `Component2` 页面，注意查看地址栏信息；

### 5. 路由嵌套与坑位

在 Vue 中进行路由嵌套时，需要在父级路由中配置 `children` 属性来定义子路由，并在父级组件中使用 `router-view` 作为坑位以接收子路由的内容。

**配置示例**：
父路由：`{path: '/parent', component: 'ParentComponent'}`

子路由：`{path: '/parent/:childName', name: 'Child', component: 'ChildComponent'}`

**问题**：在父级页面中配置了子路由，但点击子路由链接时页面并未显示。

**原因**：子路由的显示需要在父级组件中留有 `router-view` 坑位。确保在父级组件中也配置了 `router-view`，以便子路由内容正确加载。

### 结语

本文通过实例详细介绍了 Vue.js 中路由参数的两种常见形式及其使用方法，并强调了在进行路由嵌套时正确配置坑位的重要性。希望这些内容能帮助开发者更高效地管理和利用路由参数，构建出功能丰富、结构清晰的前端应用。接下来，我们计划深入学习 Vue CLI 3 脚手架，以实践构建更复杂的前端应用。欢迎关注，一起学习和成长！