vue路由传参

vue路由传参

1：query方法：
组件1给组件2传参
1）点击按钮给其他组件传参

 <div class="bigbox">
      <div
        v-for="item in shoppinglist"
        :key="item.id"
        class="box"
        @click="tiaozhuan(item)"
      >
        <!-- <img class="img" :src="item.img" alt="" /> -->
        <h2>编号:{{item.id}}</h2>
        <h2>商品名称：{{ item.name }}</h2>
        <h3>商品价格：{{ item.price }} 元</h3>
        <p><span>商品描述</span>：{{item.goodsDesc}}</p>
      </div>
    </div>

2）在跳转路由时，query携带参数传递

  tiaozhuan(item) {
      this.$router.push({
        path: "/goods/goodlisttotwo",
        query: {
          id: item.id,
          name: item.name,
          ctime:item.ctime,
          price:item.price,
          sellCount:item.sellCount,
          goodsDesc:item.goodsDesc,
          category:item.category,
          rating:item.rating
        },
      });
    },

3）在组件2的router中的index.js中的路由配置使用props接收参数
并将接收到的参数使用别名来接收

{
           path:'/goods/goodlisttotwo',
           component:Goodlisttotwo,
           props($route){
               return {
                 id:$route.query.id,
                 name:$route.query.name,
                 price:$route.query.price,
                 ctime:$route.query.ctime,
                 sellCount:$route.query.sellCount,
                 goodsDesc:$route.query.goodsDesc,
                 category:$route.query.category,
                 rating:$route.query.rating,
               }
           }
         }

4）在组件2中使用接收到的参数
使用时{{$route.query.name}}

<template>
  <el-card class="box-card">
    <div class="box">
      <div class="one">
       <p>商品名称：{{ $route.query.name}}
      </div>
       </div>
       </el-card>
</template>

使用props来接收router文件夹中index.js配置路由的数据别名

methods:{
   props:['id','name','ctime','price','sellCount','goodsDesc','category','rating']
}

2：params方法传参
1）点击按钮给其他组件传参：

      <div class="pa" @click="dianji(params1)">点击params传参</div>

2）跳转路由时传参：

export default {
  data() {
    return {
      params1:'我是params1方法传递的参数'
    }
  },
  methods:{
   dianji(id){
      this.$router.push({
        path:`/ceshi/${id}`
      })
    }
  }

3）在router中index.js中配置路由：

 {
        path:'/ceshi/:id',
        component:Ceshi
      }

4）直接在路由中使用：

<h1>这是params传值的方法{{this.$route.params.id}}</h1>