【vue2.0】vue-router路由传参

原创已于 2023-02-12 17:49:29 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2021-01-20 09:43:46 首次发布

vue2.0 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Vue Router中的两种参数传递方式：params和query。通过params实现动态路由，通过路径拼接的方式传递参数；而query则类似于传统的查询字符串方式。在组件内部，可以通过$route对象获取传递的参数。示例代码展示了如何在模板、路由配置和组件中使用这两种方法进行参数传递。

vue-router 路由传参
路由传参两种：params（/user/abc）、query（/user?id=abc）

1、 params：以路由拼接方式（动态路由）

第一步：在路由跳转阶段拼接路径；（router-link与普通事件两种）

<router-link :to="'/user/'+userId" >
用户</router-link>
&&
this.$router.push('/user/'+this.userId)
---
第二种方式：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})

 第二步：路由配置中接受拼接；

{ 
	path:'/user/:id',
	name:User,
	component:User 
}

 第三步：组件内使用；

{{$route.params.id}}
&&
computed:{
	userId(){
		return this.$route.params.id
	}
}

2、 query：以传统query方式

第一步：在路由跳转阶段传递query对象；（两种）

<router-link :to="{ path:'/profile',query:{name:'zzz',age:12}}" >
档案</router-link>
&&
this.$router.push({ 
	path:'/profile',
	query:{name:'zzz',age:12}
})

第二步：路由配置中不需要特殊操作；

{ path:'/profile',name:Profile,component:Profile }

第三步：组件内使用；

<div>{{$route.query.name}}</div>
&&
computed:{
	userName(){
		return this.$route.query.name
	} 
}