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 부분

데이터 데이터

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

아래 그림과 같이 클릭

두 번째: 어두운 텍스트 라우팅 점프는 게시물과 동일하며 주소 표시줄 매개변수는 숨겨져 있습니다.

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

아래 그림과 같이 클릭

글이 괜찮다고 생각되시면 참고하시고 참고하셔서 모아두세요 틀린 부분이 있으면 정정 부탁드립니다 재인쇄가 필요하시면 출처를 밝혀주시면 감사하겠습니다! ! !