Chinaunix首页 | 论坛 | 博客
  • 博客访问: 3223876
  • 博文数量: 269
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1988
  • 用 户 组: 普通用户
  • 注册时间: 2019-10-28 13:40
文章分类

全部博文(269)

文章存档

2022年(42)

2021年(155)

2020年(50)

2019年(22)

我的朋友

分类: IT业界

2020-04-02 15:20:07

标签跳转
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 对象中包涵了路由的相关信息,请自看!!

阅读(1309) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~