Vue路由跳转传递参数

Vue路由跳转传递参数

1. 参数类型

1.1 params参数

浏览器地址栏表现形式为http://ip:port/#/user/10

1. 路由的index.js文件对应的设置

{
	path: "/user/:id",
	component: User
}

2. 路由跳转传递params参数

this.$router.push("/user/"+this.id);

4. 获取传递的参数

{{$route.params.id}}

1.2 query参数

浏览器地址栏表现形式为http://ip:port/#/user?id=10

1. 路由跳转传递query参数

this.$router.push("/user?id="+this.id);

2. 获取传递的参数

{{$router.query.id}}

2. 路由传递参数写法

2.1 字符串形式

//params参数
this.$router.push("/user/"+this.id);
//query参数
this.$router.push("/user?id="+this.id);
//params参数和query参数一起使用
this.$router.push("/user/"+this.id+"?q="this.id);

2.2 模板字符串

//params参数
this.$router.push(`/user/${this.id}`);
//query参数
this.$router.push(`/user?k=${this.id}`);
//params参数和query参数一起使用
this.$router.push(`/user/${this.id}?q=${this.id}`);

2.3 对象

需要给路由添加name, user的路由改为如下

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

//params参数
this.$router.push({name:"user",params:{id:this.id}});
//query参数
this.$router.push({name:"user",query:{id:this.id}});
//params参数和query参数一起使用
this.$router.push({name:"user",params:{id:this.id},query:{id:this.id}});