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 标签跳转
<router-link :to="{path: '/linkTo', query: {name:'ming', age: 18 }}">
<button>跳转</button>
</router-link>
<router-link :to="{name: 'linkTo', params: {name:'ming', age: 18 }}">
<button>跳转</button>
</router-link>
console.log(this.$route.query.name);
console.log(this.$route.query.age);
console.log(this.$route.params.name);
console.log(this.$route.params.age);
3.2 编程式路由跳转
<button @click="jump1">跳转</button>
jump1() {
this.$router.push({
path: '/linkTo',
query: {
name: "ming",
age: 18
<button @click="jump2">跳转</button>
open2() {
this.$router.push({
name: "abolinkTout", // ⚠️注：这里不能用path路径，只能用name【请对照router.js中的路由规则中的name项】，否则取不到传过去的数据
params: {
name: "ming",
age: 18
console.log(this.$route.query.name);
console.log(this.$route.query.age);
console.log(this.$route.params.name);
console.log(this.$route.params.age);
console.log(this.$route);
vue中页面跳转有<router-link>标签跳转与this.$router.push()编程式路由跳转两种方式，在无参数跳转时就只需要加一个path就可以了。带参数跳转时分为query和params两种带参数的方式，如果参数不长或者参数可以让用户看到就可以使用query的方式传递参数，如果参数很多或很长或者参数不想让用户发现则采用params方式传递参数，同时需要记住的是query对应使用router.js中的path，params使用router.js中的name；接受参数的方式就是用什么方式传的就用什么方式接受就可以了。
