路由跳转传参的方式和区别

暖橘.

已于 2022-02-25 16:26:13 修改

阅读量670

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

于 2022-02-25 16:06:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46155697/article/details/123135280

本文详细介绍了Vue.js中路由的使用，包括无参数跳转、query参数传递和params参数传递。重点讲解了query和params的区别，query类似于GET请求，参数显示在URL中并能保留；而params类似于POST，参数不显示但刷新后会丢失。通过实例代码展示了不同方式的路由跳转和参数获取方法。

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

路由跳转及传参

1.  不带参数
	this.$router.push('/home')
	this.$router.push({name:'home'})
	this.$router.push({path:'/home'})
2. query传参 
	this.$router.push({name:'home',query: {id:'1'}})
	this.$router.push({path:'/home',query: {id:'1'}})
	// html 取参  $route.query.id
	// script 取参  this.$route.query.id
3. params传参
	this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
	// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
	// 不配置path ,第一次可请求,刷新页面id会消失
	// 配置path,刷新页面id会保留
	// html 取参  $route.params.id
	// script 取参  this.$route.params.id
4. query和params区别
	query：类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 刷新页面id还在
	（非重要性的可以这样传, 密码之类还是用params）
	params：类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失，