Vue 路由参数传递与获取详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44415461/article/details/98472497

本文介绍了在Vue中如何进行路由参数的传递和获取。通过`:to`属性，可以使用`query`和`params`进行传参。查询参数(query)适用于name或path，而路径参数(params)需与name配对。要正确获取参数，可以使用`this.$route.query.id`或`this.$route.params.id`。值得注意的是，使用路由参数时，必须在路由规则中配置参数名，否则刷新页面会导致参数丢失。

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

查询参
- 配置（传参） :to="{name:‘login’,query:{id:loginid}}"
- 获取（取参） this.$route.query.id
路由参数
- 配置（传参） :to="{name:‘register’,params:{id:registerid} }"
- 配置路由的规则 { name:‘detail’,path:’/detail/:id’}
- 获取 this.$route.params.id

总结：

:to传参的属性里 params是和name配对的 query和name或path都可以
使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路由的传参和取参</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
	var Login = {
		template:`<div>
			我是登录页面
			<span>这是我获取到的参数:{{msg}}</span>
		</div>`,
		data(){
			return {
				msg:''
			}
		},
		created(){
           this.msg = this.$route.query.id
		}
	}
	var Register = {
		template:`<div>
			我是注册页面
			<span>这是我获取到的参数:{{foo}}</span>
		</div>`,
		props:['foo']
/*		data(){
			return {
				stringfoo:''
			}
		},
		created(){
			this.stringfoo = this.$route.params.foo
		}*/
	}
	//安装路由插件
	Vue.use(VueRouter);
	//创建路由对象
	var router = new VueRouter({
		//配置路由对象
		routes:[
          {path:'/login',name:'login',component:Login},
          {path:'/register/:foo',name:'register',props:true,component:Register}
		]
	})
	new Vue({
		el:'#app',
		router,
		template:`<div>
		    <router-link :to="{name:'login',query:{id:'123'}}">去登陆</router-link>
		    |
		    <router-link :to="{name:'register',params:{foo:'bar'}}">去注册</router-link>
		    <button @click="jslink">js跳转去登录</button>
			<router-view :key="$route.fullPath"></router-view>
		</div>
		`,
		data(){
			return {

			}
		},
		methods:{
			//js跳转传参是一样的
			jslink(){
                this.$router.push({name:'login',query:{id:'456'}})
			}
		}
	})
</script>
</html>

运行效果图:
在这里插入图片描述