vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）

深碍√TFBOYSˉ_ 2022-11-30 12:37 162阅读 0赞

### this.$router.push进行编程式路由跳转传参 ###

*  router中路由配置
 *  组件home点击传参
 *  组件homeDetails接受参数

# router中路由配置 #

params第一种传参路由配置

{ 
       path: '/homeDetails/:id',//要传递的参数前面加：
       name:'homeDetails'
       component: () =>import ('@/views/home/homeDetails.vue'),
       //子路由的绝对路径
      },

query方式/params第二种（name传参）路由配置

{ 
       path: '/homeDetails',//要传递的参数前面加：
       name:'homeDetails'
       component: () =>import ('@/views/home/homeDetails.vue'),
       //子路由的绝对路径
      },

# 组件home点击传参 #

// 例如表格中点击表名称跳转新页面需要把id传到新页面使用
    <template>
      <el-table :data="tableDatas">
        <el-table-column label="产品名称">
          <template slot-scope="scope" @click="handleClick(scope.row.id)">{ {  scope.row.name}}</template>
        </el-table-column>
         ...
      </el-table>
     </template>
     <script>
     export default{ 
       data(){ 
        tableDatas:[];//表格数据
       },
       methods:{ 
        handleClick(id){ 
          console.log(id) //121345
          this.$router.push({ path:`/homeDetails/${ id}`}) //params方式传参第一种方式
          this.$router.push({ name:'homeDetails',params:{ id:id}}) //params方式传参第二种方式
          
          // 或
          this.$router.push({ path:`/homeDetails`, query:{ id:id}}) // query方式传参
        }
       }
     } 
    </script>

# 组件homeDetails接受参数 #

// 子组件使用this.$route.params.id来接收路由参数
    <template>
     <div><span>这就是我需要的id：</span>{ { $route.params.id || $route.query.id}}</div>
      //或
     <div><span>这也是我需要的id：</span>{ { id}}</div>
    </template>
    <script>
     export default{ 
       data(){ 
        id:''
       },
       mounted(){ 
        this.id = this.$route.params.id  //121345 params传参方式接收
        //或
        this.id = this.$route.query.id  //121345 query传参方式接收
       }
     } 
    </script>