vue-03-路由-路由传参

男娘i 2023-07-20 13:40 174阅读 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