Vue el-menu-item路由跳转

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Vue el-menu-item路由跳转

小羊羊.   2022-09-29 我要评论

场景:

用了element-ui的el-menu 菜单 怎样实现路由跳转呢?

方法如下:

1,在el-menu加上router,添加el-menu的default-active属性,加:动态绑定,值设置为"this.$router.path" ,

2,将el-menu-item的index设置为路由跳转path,和route.js相对应

 代码:

<el-menu router
        :default-active="this.$router.path"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/xieyituigai" >协议退改</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">酒店</template>
            <el-menu-item index="/form">酒店预订</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
      </el-menu>  

补充:el-menu-item 实现水平导航栏,路由的跳转

<el-menu
      class="el-menu-vertical-demo"
     id="topNav"
      router
      background-color='#ededed'
      text-color='#000000'
      mode="horizontal"
      :default-active="activeIndex"
    >
    <el-menu-item v-for="item in topArray" :key="item.key" :index="item.name"  class="contentShow">
      <template>
        <span :key="item.key" >{{item.name}}</span>
        <img src="../image/outPage.png" :key="item.key">
      </template>
    </el-menu-item>
  </el-menu>

做了一个项目,是左侧导航树进行点击后,上方出现相应的模块,可进行跳转,而且是动态进行添加的,效果图如下:

总结

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们