Vue Router 中如何获取路由传递过来的参数?
在 Vue Router 中，获取路由传递的参数主要有以下几种方式:
一、通过 $route 对象获取
在 Vue 组件中，可以直接通过 $route 对象访问路由参数:
1、对于动态路由参数(路径参数):
<template>
<div>用户ID: {{ $route.params.id }} </div>
</template>
2、对于查询参数:
<template>
<div>搜索关键词: {{ $route.query.keyword }} </div>
</template>
3、对于 hash 值:
<template>
<div>Hash: {{ $route.hash }} </div>
</template>
二、使用Composition APl的 useRoute 钩子
在 Vue 3 的组合式 AP| 中，可以使用 useRoute 钩子获取路由参数:
<script setup>
import { useRoute } from 'vue-router'
const route= useRoute();
console.log(route.params.id)//获取路径参数
console.log(route.query.keyword)//获取查询参数
console.1og(route.hash)//获取 hash 值
</script>
三、通过 props 解耦方式获取
为了解耦组件和路由，可以通过配置路由的 props 选项，将路由参数作为组件的 props 传入:
// 路由配置
const routes = [
{
path: '/user/:id',
component: User,
props: true // 将路由参数作为组件 props 传入
}
]
然后在组件中通过 props 接收:
<script setup>
// Composition API
defineProps({
id: string
})
</script>
<template>
<div>用户ID: {{ id }}</div>
</template>
或者在选项式 API中
<script>
export default{
props:{
id: string
}
}
</script>
扩展知识
1)、路由参数的类型
Vue Router 中的路由参数主要有三种类型:
- 路径参数(Params):通过路径定义的动态部分，如 /users/:id
- 查询参数(Query):URL中?后面的参数，如 /users?role=admin
- Hash 值:URL中#后面的部分，如 /users#profile
2)、路由参数的高级配置
路径参数的高级匹配模式
Vue Router 支持在路径参数中使用正则表达式进行更精确的匹配,
// 只匹配数字 ID
{ path: "/users/:id(\\d+)'，component: User }
// 匹配可选参数
{ path: '/users/:username?', component: User }
// 匹配多个参数段
{ path: '/:pathMatch(.*)*', component: NotFound }
函数式 props 传递
可以使用函数来处理和转换路由参数:
const routes = [
{
path: '/search',
component: SearchUser,
props: route => ({
query: route.query.q,
page: Number(route.query.page) || 1 // 转换为数字类型
})
}
]
3)、响应路由参数变化
当在同一个组件中路由参数发生变化时(如从 /users/1 导航到 /users/2 )，组件实例会被复用，不会触发生命周期钩子。此时需要监听路由参数的变化:
使用 watch 监听
<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(() => route.params.id，(newId，oldId) => {
// 路由参数变化时执行的逻辑
console.log(`路由从 ${oldId} 变为 ${newId}`)
// 重新获取数据等操作
})
</script>
使用导航守卫
<script setup>
import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate(async (to，from) => {
// 可以在这里执行异步操作
const userData = await fetchUser(to.params.id)
// 还可以取消导航
})
</script>
4)、实际应用场景
用户详情页: 通过 ID 获取不同用户信息
/users/:id // 获取 route.params.id
产品筛选页: 通过查询参数筛选产品
/products?category=electronics&sort=price // 获取 route.query.category 和 route.query.sort
多级路由参数:嵌套的动态路由
/users/:userId/posts/:postId // 获取 route.params.userId 和 route.params.postId
Vue Router 的官方文档提供了更多详细信息，可以访问以下链接了解更多:
动态路由匹配:
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
路由组件传参:
https://router.vuejs.org/zh/guide/essentials/passing-props.html