Vue 路由传值四种方式

最新推荐文章于 2025-02-21 16:30:00 发布

原创最新推荐文章于 2025-02-21 16:30:00 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

JavaScript 同时被 2 个专栏收录

56 篇文章

订阅专栏

Vue

15 篇文章

订阅专栏

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

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




                