【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,其中keywordpage就是查询参数。

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设计风格。
相关推荐
excel8 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix12 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端12 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧12 小时前
Promise 的使用
前端·javascript