vue-03-路由-路由传参-蒲公英云

vue-03-路由-路由传参

男娘i 2023-07-20 13:40 105阅读 0赞

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，例如：xxx/shop/shopId=123。

但是，在vue中，传参的形式和平时页面跳转的传参形式是不一样的，因为vue中是一个单页应用，不存在页面跳转，只是路由间的跳转。

路由跳转传值存在两种情况

1、query 对应 path，如果push跳转的时候，是通过path路径跳转的，那么我们在传递参数的时候，就只能通过 query 来传递参数。取值的时候，也只能使用固定的 this.$route.query.xxx。

这样最终在浏览器显示的地址就是 xxx/mtindex/detail?shopid=123456

{
    path:'/mtindex',
    component: mtindex,
    //添加路由
    children:[
         {
          path:'/detail/:shopid',
          component:guessdetail
         }
    ]    
},
//跳转传参
this.$router.push({
  path: '/mtindex/detail', query:{shopid: item.id}
});
//取值
this.$route.query.shopid

2、params 对应 name。如果push跳转的时候，是通过path路径跳转的，那么我们在传递参数的时候，就只能通过 params 来传递参数。取值的时候，也只能使用固定的 this.$route.params.xxx。

这样最终在浏览器显示的地址就是 xxx/mtindex/detail?shopid=123456

{
    path:'/mtindex',
    component: mtindex,
    //添加路由
    children:[
         {
          path:"/detail",
          name:'detail',
          component:guessdetail
         }
    ]    
},
//传参数（ params相对应的是name  query相对应的是path）
this.$router.push({
  name: 'detail', params:{shopid: item.id}
});
//获取参数
this.$route.params.shopid