使用elementUI中的el-menu实现理由的跳转

最新推荐文章于 2024-01-16 17:23:30 发布

small面包

最新推荐文章于 2024-01-16 17:23:30 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： elementUI NavMenu 路由跳转切换页面 vue

本文链接：https://blog.csdn.net/weixin_44986077/article/details/100513543

版权

本文介绍了如何利用elementUI的el-menu组件实现在vue项目中根据用户点击菜单进行页面路由跳转。通过设置default-active属性为当前路由路径，配合HTML代码和el-row、el-col布局，成功实现了底部固定导航菜单的功能。

摘要由CSDN通过智能技术生成

使用elementUI中的el-menu实现理由的跳转

今天突然要改一个需求说是在整个页面的底部加一个固定定位，进行页面的跳转，想了一下直接打开了熟悉的elementUI的官方文档

首先把官网中的内容进行CV大法进行有效的粘贴,根据自己的实际情况进行调整 ，
效果（点击不同的出现不同的页面）

HTML代码


 <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          router
        >
            <el-menu-item index="/index">
              <i class="iconfont icon-zhuye"></i>
              <div slot="title">首页</div>
            </el-menu-item>
            <el-menu-item index="/advance">
              <i class="iconfont icon-fenxiang"></i>
              <div slot="title">分享</div>
            </el-menu-item>           <el