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",// 这里要加name的名称一般大写 和路由相对应
        params: {
          type: index,
        },
      });
      // 在另个一个接收组件created():this.$route.params.index
    },

// 还要配置路由加name
const routes = [{
    path: '/index',
    name: 'Index',
    component: Home,
    children: [{
        path: 'indexChildren',
        name:'IndexChildren',  // 这里要加name的名称一般大写
        component: () => import( /* webpackChunkName: "about" */ '../views/index.vue')
    }, ]
}]

点击后如下图

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