vue3路由跳转携带参数
Vue3使用路由携带参数需要引入路由组件和使用$route对象。
引入路由组件：
import { createRouter, createWebHistory } from 'vue-router'。
使用$route对象获取路由参数：react router路由传参
<template>。
<div>。
<h2>{{ $route.params.id }}</h2>。
</div>。
</template>。
createRouter中配置路由跳转路径和携带参数：
const routes = 。
。
path: '/user/:id',。
props: true // 将$route.params传递为组件属性。
}。
]。
const router = createRouter(。
history: createWebHistory(),。
routes。
})。
然后通过router.push跳转路径并携带参数：
router.push({ name: 'user', params: { id: '123' } })。
在UserProfile组件中可以通过props接收路由参数：
<template>。
<div>。
<h2>{{ id }}</h2>。
</div>。
</template>。
<script>。
export default 。
props: ['id']。
}。