Vue routing jumps this.$router.push two methods with parameters

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 part

data data

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

The first type: clear text routing jump is equivalent to get, you can see the parameters in the address bar

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
    },

Click as shown below

The second: dark text routing jump is equivalent to post, address bar parameters are hidden

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

Click as shown below

If you feel that the article is good, remember to pay attention, pay attention and collect it. Please correct me if there is any mistake. If you need to reprint, please indicate the source, thank you! ! !