el-menu菜单路由跳转时传参给组件

葛书
2023-12-01

使用el-menu菜单切换组件时,如果要携带参数,路由传参的方式是在el-menu-item中添加 :route去指定路由,包括参数

<el-menu-item index="/signStudent" 
             :route="{name:'signStudent',query:{state:0}}">
        <template slot="title">
          <!--图标-->
          <i class="el-icon-s-custom"></i>
          <!--文本-->
          <span>待审核项目成员</span>
        </template>
</el-menu-item>
      <!--二级菜单-->
<el-menu-item index="/projectStudent" 
             :route="{name:'projectStudent',query:{state:1}}">
        <template slot="title">
          <!--图标-->
          <i class="el-icon-s-custom"></i>
          <!--文本-->
          <span>所有项目成员</span>
        </template>
</el-menu-item>

路由传参使用query时,会把参数拼接到路径中,刷新还在,不会丢失这个参数
路由传参使用params时,刷新就不在了,会丢失这个参数。

最后在组件中去获取这个参数:this.state = this.$route.query.state;

 类似资料: