Vue页面跳转与参数传递

标签跳转
1、不带参数跳转





 跳转到关于我们

 

 跳转到关于我们





2、带参数跳转





 跳转到关于我们

 

 跳转到关于我们



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、不带参数跳转




跳转到关于我们




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


2、带参数跳转




//query方式
跳转到关于我们




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




//params方式
跳转到关于我们




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 对象中包涵了路由的相关信息，请自看！！