vue 页面跳转之参数传递与接收参数

14,252 阅读2分钟

一、跳转方式

vue中页面跳转方式分别由标签跳转与编程式路由跳转。

标签跳转<router-link></router-link> 映射路由

编程式路由跳转this.$router.push()

二、不带参数跳转

标签跳转

有两种写法,默认path参数与显式使用path参数。

<router-link to='/linkTo'>
	<button>跳转</button>
</router-link>
 
<router-link :to="{path: '/linkTo'}">
	<button>跳转</button>
</router-link>

编程式路由跳转

<button @click="jump">跳转</button>

jump() {
	this.$router.push('/linkTo');
}

三、带参数跳转

带参数跳转有queryparams两种带参数的方式,其中query方法相当于是HTTP请求中的GET方法,会把参数加在URL后面再进行跳转;params方法相当于是HTTP请求中的POST方法,URL保持不变。

需要注意的是query方法使用的是path参数,对应的是router.js中的路由规则中的path项。

params方法使用的是name参数,对应的是router.js中的路由规则中的name项。

3.1 标签跳转

跳转

//query方式
<router-link :to="{path: '/linkTo', query: {name:'ming', age: 18 }}">
	<button>跳转</button>
</router-link>
 
//params方式
<router-link :to="{name: 'linkTo', params: {name:'ming', age: 18 }}">
	<button>跳转</button>
</router-link>

接受参数

// 以query方式接收参数:【query传递数据是通过URL传递的,类似ajax中的get方式】
console.log(this.$route.query.name);    // ming
console.log(this.$route.query.age);     // 18
 
// 以params方式接收参数:【params方式,类似ajax中的post方式】
console.log(this.$route.params.name);    // ming
console.log(this.$route.params.age);     // 18

3.2 编程式路由跳转

跳转

//query方式
<button @click="jump1">跳转</button>

jump1() {  
	this.$router.push({
		path: '/linkTo',
		query: {
			name: "ming",
			age: 18
		}
	});
}
//⚠️注:如果要传递的参数很长时,请用params方式,因为query方式是通过URL传递的,而URL传参数长度是有限制的哦!!

//params方式
<button @click="jump2">跳转</button>

open2() {
	this.$router.push({
		name: "abolinkTout", // ⚠️注:这里不能用path路径,只能用name【请对照router.js中的路由规则中的name项】,否则取不到传过去的数据
		params: {
			name: "ming",
			age: 18
		}
	});
}

接受参数

//⚠️注:在传递参数时,用什么方式传参,就用什么方式接收!!
// 以query方式接收参数:【query传递数据是通过URL传递的,类似ajax中的get方式】
console.log(this.$route.query.name);    // ming
console.log(this.$route.query.age);     // 18

// 以params方式接收参数:【params方式,类似ajax中的post方式】
console.log(this.$route.params.name);   // ming
console.log(this.$route.params.age);    // 18
 
// this.$route 路由信息对象
console.log(this.$route);

四、总结

vue中页面跳转有<router-link>标签跳转与this.$router.push()编程式路由跳转两种方式,在无参数跳转时就只需要加一个path就可以了。带参数跳转时分为query和params两种带参数的方式,如果参数不长或者参数可以让用户看到就可以使用query的方式传递参数,如果参数很多或很长或者参数不想让用户发现则采用params方式传递参数,同时需要记住的是query对应使用router.js中的path,params使用router.js中的name;接受参数的方式就是用什么方式传的就用什么方式接受就可以了。