vue路由传参主要的3种方式小白入门_路由入门百科

1、query方式(push时使用path来匹配)发起页面:this.$router.push({path: “/accept”, //接收页面路由query: {id: 222}
});路由配置:routes: [{path: “/accept”
}]接受参数页面:export default{data(){return{id:this.$router.q

vue路由传参主要的3种方式小白入门

1、query方式

(push时使用path来匹配)发起页面:

this.$router.push({
   path: "/accept", //接收页面路由
   query: {
     id: 222
   }
});

路由配置:

routes: [{
   path: "/accept"
}]

接受参数页面:

export default{
  data(){
    return{
      id:this.$router.query.id; //这里接收参数
    }
  }
}

跳转转收页面的时候,地址栏会显示:http://ip:port/accept?id=222

2、params模式

(push时使用name来匹配)发起页面:

this.$router.push({
  name: "accept", //路由配置中的name
  params:{
    id:222
  }
});

路由配置:

routes: [{
   name: "accept",
   path: "/accept"
}]

接收参数页面:

export default{
  data(){
    return{
      id:this.$router.params.id; //这里接收
    }
  }
}

跳转转收页面的时候,地址栏显示目的地址,不带任何参数

3、location预声明参数模式

(push使用path来匹配,但是它跟params模式不同)发起页面:

this.$router.push({
   path: '/accept/222'
});

路由配置:

routes: [{
   path: "/accept/:id"
}]

接收参数页面:

export default{
  data(){
      return{
          id: this.$router.params.id
      }
  }
}

路由跳转时,url会显示:http://ip:port/accept/222

海计划公众号
(0)
上一篇 2020/04/05 01:40
下一篇 2020/04/05 01:40

您可能感兴趣的内容