Vue 路由传值四种方式

最新推荐文章于 2025-03-17 15:11:34 发布

JasoncodeQvQ

最新推荐文章于 2025-03-17 15:11:34 发布

阅读量1.3k

点赞数

分类专栏： JavaScript Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CodingmanNAN/article/details/130360887

版权

JavaScript 同时被 2 个专栏收录

56 篇文章

订阅专栏

Vue

15 篇文章

订阅专栏

本文介绍了Vue.js中使用router-link和$router.push进行页面跳转的方法，包括动态路径参数传递。通过path和params或query，可以实现不同方式的数据传值，同时展示了对应的路由配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    一、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)
}
 

                