vue路由跳转this.$router.push带参数两种方法

index.vue

html

<el-table class="table" :data="tableData" style="width: 100%">
            <el-table-column label="" width="1000">
              <template slot-scope="scope">
                <!-- <div @click="get(scope.$index)"> -->
                <div @click="get(scope.row.name)">
                  <img src="../assets/weng.png" alt="" />
                  <span style="margin-left: 10px">{
   
   { scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>

js部分

data数据

 tableData: [
        {
          name: "王小虎",
        },
        {
          name: "王小虎",
        },
        {
          name: "王小虎",
        },
      ],
      

第一种:明文路由跳转 相当于get,可以在地址栏看到参数

get(index) {
      console.log(index);

      const info = JSON.stringify({
        id: 1,
        flag: true,
      });
      // 明文路由跳转 相当于get
      this.$router.push({
        path: "/indexChildren",
        query: {
          info,
        },
      });
      // 在另个一个接收组件created():this.$route.query.info
    },

点击后如下图

第二种:暗文路由跳转 相当于post，地址栏参数隐藏

get(index) {
  // 暗文路由跳转 相当于post
   this.$router.push({
   name: "indexChildren",
    params: {
      type: index,
    },
  });
  // 在另个一个接收组件created():this.$route.params.index
},

点击后如下图

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！