Vue3Router路由传参

 import { useRouter } from 'vue-router'
//首先在setup中定义
 const router = useRouter()
 
// 字符串
router.push('home')
 
// 对象
router.push({ path: 'home' })
 
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
 
// 带查询参数，变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})
 
 
//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
 
//params
let userId=route.params.userId;
 
 
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

posted @ 2023-11-03 17:26 Felix_Openmind 阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue路由传递参数

· Vue3路由的redirect重定向结合函数实现不同的用户身份跳转到不同的首页

· vue3 router 路由传参

· vue-router 路由传参

· Vue3 中使用 vue-router 实现路由跳转与参数获取

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Vue3Router路由传参

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	import { useRouter } from 'vue-router'
	//首先在setup中定义
	const router = useRouter()

	// 字符串
	router.push('home')

	// 对象
	router.push({ path: 'home' })

	// 命名的路由
	router.push({ name: 'user', params: { userId: '123' }})

	// 带查询参数，变成 /register?userId=123
	router.push({ path: 'register', query: { userId: '123' }})


	//首先在setup中定义
	const route = useRoute()
	//query
	let userId=route.query.userId;

	//params
	let userId=route.params.userId;


	const userId = '123'
	router.push({ name: 'user', params: { userId }}) // -> /user/123
	router.push({ path: `/user/${userId}` }) // -> /user/123
	// 这里的 params 不生效
	router.push({ path: '/user', params: { userId }}) // -> /user