Vue 路由传值四种方式

关注

原创最新推荐文章于 2026-03-30 22:23:48 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

在 Vue3 中，路由跳转传值方法、常见场景、问题及最佳实践解决方案 Vue3 使用 Vue Router 4.x，路由传值主要通过以下方式实现阅读详情

          
            
          
          一、router-link 跳转，路由表动态 path
原始组件	<router-link to='/home/123'></router-link>
跳转示例	//localhost/home/123
传值输出	this.$router.params.id
路由配置{
  path: '/home/:id',
  name: 'home',
  component: resolve => require(["@/xxx"], resolve)
}


二、$router.push 跳转，路由表动态 path
原始组件	this.$router.push({ path:'/home/123' })
跳转示例	//localhost/home/123
传值输出	this.$router.params.id
路由配置{
  path: '/home/:id',
  name: 'home',
  component: resolve => require(["@/xxx"], resolve)
}


三、$router.push 跳转，修改跳转参数 params
原始组件	this.$router.push({ name:'/homepage', params:{id:123} })
跳转示例	//localhost/home
传值输出	this.$router.params.id
路由配置{
  path: '/home',
  name: 'homepage',
  component: resolve => require(["@/xxx"], resolve)
}


四、$router.push 跳转，修改跳转参数 query
原始组件	this.$router.push({ path:'/home', query:{qid:123} })
跳转示例	//localhost/home?qid=123
传值输出	this.$router.query.qid
路由配置{
  path: '/home',
  name: 'home',
  component: resolve => require(["@/xxx"], resolve)
}




        