Vue 实战：从 URL Path 中获取动态参数，Vue2/Vue3 全版本保姆级教程

8次阅读

在 Vue 项目开发中，URL 路径动态参数是最常用的传参方式之一！

比如商品详情页 /goods/10086、用户主页 /user/666、分类页 /category/phone，这里的 10086、666、phone 就是Path 参数（路径参数）—— 它是 URL 路径的一部分，也是页面渲染数据的核心依据。

很多新手会混淆Path 参数和Query 参数（/goods?id=10086），本文只聚焦 Path 参数，从零到一教你在 Vue2、Vue3 中精准获取路径参数，全场景覆盖，直接复制即用！

核心前提

获取 Path 参数必须依赖 vue-router，且第一步要在路由配置中定义动态占位符（格式：:参数名），这是获取参数的核心前提！

表格

Vue 版本	vue-router 版本
Vue2	3.x
Vue3	4.x（推荐）

一、基础路由配置（通用）

无论 Vue2 还是 Vue3，先在路由文件中定义带动态占位符的路由，这一步完全通用：

javascript

运行

// router/index.js 路由配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Detail from '../views/Detail.vue'

Vue.use(VueRouter)

const routes = [
  // 👇 定义动态路径参数 :id（参数名自定义，比如:userId、:goodsId）
  {
    path: '/detail/:id', 
    name: 'Detail',
    component: Detail
  },
  // 多参数示例
  {
    path: '/article/:category/:articleId',
    name: 'Article',
    component: () => import('../views/Article.vue')
  }
]

const router = new VueRouter({ routes })
export default router

二、Vue2 中获取 Path 参数

Vue2 使用选项式 API，直接通过 this.$route.params 获取参数，最简单直接！

1. 完整代码示例

vue

<!-- views/Detail.vue -->
<template>
  <div>
    <h2>商品详情页</h2>
    <!-- 模板中直接使用 -->
    <p>商品ID：{{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  created() {
    // 脚本中通过 this 获取路径参数
    const goodsId = this.$route.params.id
    console.log('获取到的商品ID：', goodsId) 
    // 拿到参数后调用接口请求数据
    // this.getDetail(goodsId)
  }
}
</script>

三、Vue3 中获取 Path 参数（两种写法）

Vue3 推荐组合式 API，setup 中没有 this，需要用 vue-router 提供的 useRoute 钩子函数获取参数。

写法 1：setup 语法糖（推荐，最简洁）

vue

<!-- views/Detail.vue -->
<template>
  <div>
    <h2>Vue3 商品详情页</h2>
    <p>商品ID：{{ route.params.id }}</p>
  </div>
</template>

<script setup>
// 1. 从vue-router中导入 useRoute
import { useRoute } from 'vue-router'

// 2. 创建 route 实例
const route = useRoute()

// 3. 获取路径参数
const goodsId = route.params.id
console.log('商品ID：', goodsId)

// 直接在setup中使用参数请求接口
</script>

写法 2：setup 函数（传统写法）

vue

<script>
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    const goodsId = route.params.id
    // 返回参数给模板使用
    return { goodsId }
  }
}
</script>

四、进阶用法（工作必备）

1. 获取多个 Path 参数

路由定义了多个占位符，直接通过 params 依次获取即可：

javascript

运行

// 路由：/article/:category/:articleId
const route = useRoute()
const category = route.params.category
const articleId = route.params.articleId

2. 可选 Path 参数

参数非必填时，在占位符后加 ?：

javascript

运行

// 路由配置：/user/:id?
// 支持路径：/user 或 /user/123
{ path: '/user/:id?', component: User }

3. 参数类型转换

⚠️ 重要：Path 参数默认都是字符串类型！

如果需要数字类型，必须手动转换：

javascript

运行

// 错误：id是字符串 "123"
const id = route.params.id 

// 正确：转换为数字 123
const id = Number(route.params.id)

4. 监听参数变化

场景：页面复用（比如从 /detail/1 跳转到 /detail/2），组件不会重新渲染，需要监听参数变化：

javascript

运行

// Vue3 监听参数
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
watch(
  () => route.params.id, 
  (newVal) => {
    console.log('参数变化了：', newVal)
    // 重新请求数据
  }
)

五、必看避坑指南

必须定义路由占位符：如果路由没写 :id，直接访问 /detail/123，params 会是空对象！
区分 Path 和 Query 参数：
- Path：/detail/123 → route.params
- Query：/detail?id=123 → route.query
Vue3 setup 无 this：不要写 this.$route，会报错！
参数是字符串：数值类型一定要手动转换，否则判断相等会出错。