【Vue 路由参数传递】

文章目录

  • [一、使用 `params` 传递参数](#一、使用 params 传递参数)
      • [1. 基本路由格式](#1. 基本路由格式)
      • [2. 可选参数的使用](#2. 可选参数的使用)
      • 代码示例
  • [二、使用 `query` 传递参数](#二、使用 query 传递参数)
      • [1. 基本路由格式](#1. 基本路由格式)
      • 代码示例
  • 总结

一、使用 params 传递参数

1. 基本路由格式

在Vue中,使用params传递参数是通过路由的动态片段来完成的。在路由配置中,使用:定义一个参数占位符,然后在路由跳转时将实际值传递给参数。

javascript 复制代码
const routes = [
  {
    path: '/user/:id', // 定义参数占位符 ':id'
    component: UserProfile
  }
]

定义一个路由 /user/:id,其中 :id 是参数占位符。在路由跳转时传递实际的用户ID值:

javascript 复制代码
// 在代码中进行路由跳转并传递参数
this.$router.push({ path: `/user/${userId}` })

2. 可选参数的使用

通过在路由定义中使用问号(?)来实现。

javascript 复制代码
const routes = [
  {
    path: '/user/:id?', // 定义可选参数 ':id?'
    component: UserProfile
  }
]

/user/user/:id都可以匹配这个路由。当参数是可选时,如果不提供参数,Vue会将其视为undefined

代码示例

javascript 复制代码
<template>
  <div>
    <h1>User Profile</h1>
    <p v-if="$route.params.id">User ID: {{ $route.params.id }}</p>
    <p v-else>User ID is not provided</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取传递过来的用户ID
    const userId = this.$route.params.id
    if (userId) {
      // 根据用户ID加载用户数据
      this.loadUserProfile(userId)
    } else {
      // 处理没有提供用户ID的情况
      console.log('User ID is not provided')
    }
  },
  methods: {
    loadUserProfile(userId) {
      // 发起API请求或执行其他操作,加载用户数据
      console.log(`Loading data for user ID: ${userId}`)
    }
  }
}
</script>

二、使用 query 传递参数

1. 基本路由格式

params不同,query参数是以键值对的形式附加到URL的查询字符串中的。在路由配置中,不需要定义参数占位符,而是直接在路由跳转时传递参数。

javascript 复制代码
const routes = [
  {
    path: '/user',
    component: UserProfile
  }
]

将参数直接作为查询参数传递:

javascript 复制代码
// 在代码中进行路由跳转并传递参数
this.$router.push({ path: '/user', query: { id: userId } })

代码示例

javascript 复制代码
<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ $route.query.id }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取传递过来的用户ID
    const userId = this.$route.query.id
    if (userId) {
      // 根据用户ID加载用户数据
      this.loadUserProfile(userId)
    } else {
      // 处理没有提供用户ID的情况
      console.log('User ID is not provided')
    }
  },
  methods: {
    loadUserProfile(userId) {
      // 发起API请求或执行其他操作,加载用户数据
      console.log(`Loading data for user ID: ${userId}`)
    }
  }
}
</script>

总结

  • 使用 params 时,参数直接包含在路由的路径中,适用于对参数的格式和可见性有要求的情况。通过在路径中使用问号(?),还可以使某些参数变为可选。
  • 使用 query 时,参数作为查询字符串传递,适用于需要将参数保留在URL中的情况,或者需要传递多个参数的情况。
相关推荐
IT_陈寒25 分钟前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端
我是华为OD~HR~栗栗呀37 分钟前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试
老黄编程40 分钟前
FireFox如何滚动截屏?
前端·firefox
_殊途2 小时前
HTML-CSS项目练习
前端·css·html
@AfeiyuO2 小时前
el-table 表格嵌套表格
前端·elementui·vue
我是华为OD~HR~栗栗呀3 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java4 小时前
vivo响应式官网
前端·css·html·1024程序员节
麦麦大数据8 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区9 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗9 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架