一、跳转方式

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');
}

三、带参数跳转

带参数跳转有query与params两种带参数的方式，其中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方式传递参数；接受参数的方式就是用什么方式传的就用什么方式接受就可以了。