标签跳转
1、不带参数跳转
<router-link to="/about">
<button>跳转到关于我们</button>
</router-link>
<router-link :to="{path: '/about'}">
<button>跳转到关于我们</button>
</router-link>
2、带参数跳转
<router-link :to="{path: '/about', query: {name:'ming', age: 18 }}">
<button>跳转到关于我们</button>
</router-link>
<router-link :to="{name: 'about', params: {name:'ming', age: 18 }}">
<button>跳转到关于我们</button>
</router-link>
3.接收参数
// 以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.$router.push()
1、不带参数跳转
<button @click="jump">跳转到关于我们</button>
jump() {
this.$router.push('/about');
}
2、带参数跳转
//query方式
<button @click="jump1">跳转到关于我们</button>
jump1() {
this.$router.push({
path: '/about',
query: {
name: "ming",
age: 18
}
});
}
//⚠️注：如果要传递的参数很长时，请用params方式，因为query方式是通过URL传递的，而URL传参数长度是有限制的哦！！
//params方式
<button @click="jump2">跳转到关于我们</button>
open2() {
this.$router.push({
name: "about", // ⚠️注：这里不能用path路径，只能用name【请对照router.js中的路由规则中的name项】，否则取不到传过去的数据
params: {
name: "ming",
age: 18
}
});
}
3、接收参数
//⚠️注：在传递参数时，用什么方式传参，就用什么方式接收！！
// 以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); //this.$route 对象中包涵了路由的相关信息，请自看！！
原文链接：https://blog.csdn.net/xqainyo/article/details/105225890
————————————————
版权声明：本文为CSDN博主「善牧静然」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42326020/article/details/112157864