为了通过axios获取路由信息,并动态生成el-menu-item组件,你可以按照以下步骤进行操作: 1. 通过axios获取路由信息 首先,你需要确保axios库已经安装在你的Vue项目中。如果还没有安装,可以使用以下命令进行安装: bash npm install axios 然后,在你的Vue组件或Vuex store中,使用axios从后端API获取路由信息。例如: javascr...
组件思路是:el-menu,里面是一会儿将要嵌套的小组件~小组件循环每个路由单项; 组件单项思路(将menu-item抽出来):看el-menu中从有没有子项就分为el-sub-menu和el-menu-item两种:el-sub-menu是右侧有小箭头,代表该项存在子菜单,可展开;el-menu-item没有小箭头,代表没有子菜单; 在menu-item中进行判断,以有无...
<el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index"> {{ item.name }} </el-menu-item> </el-menu> 其中,menuItems是一个包含菜单项信息的数组,可以根据实际情况进行动态生成或从后端获取。 六、事件处理与导航 在el-menu 组件中,可以通过 @select 事件处理菜单项的选...
-- 这个是没子节点的 没有子内容,用el-menu-item结构 --><el-menu-itemindex="/vue"><iclass="el-icon-star-off"></i><spanslot="title">vue页面</span></el-menu-item><el-menu-itemindex="/react"><iclass="el-icon-star-off"></i><spanslot="title">react页面</span></el-menu-item...
先上效果图 达成这样的效果,其实根本在于,通过开启el-menu的route属性,点击menu菜单后会进行路径的跳转,但是你跳转的路由地址必须写为根组件的子路由地址,否则会直接进行整个页面的跳转,失去了这样的效果。 然后看一下el-tabs,这里放一下elementUI的官方文档 子元素
一、已动态获取导航菜单的json数据,将获取的json数据显示成多级导航菜单的形式。可以利用递归调用组件的形式生成多级导航菜单。 二、已知json数据结构如下: const treeDatas = [ { label: '导航1', isActive: true, index: '0', child: [ { label: '导航11', ...
</el-menu-item> </el-menu> </el-aside> <el-main style="padding: 20px;"> <router-view ></router-view> </el-main> </el-container> </el-container> script 的 data 数据部分 active_index: '', //权限路由 routerMenus : [], //后台返回回来的动态路由 ...
点击其他地方,然后观察之前点击的el-menu-item的背景颜色; 再次点击之前的el-menu-item,观察el-menu-item的背景颜色; 然后将指针移动到el-sub-menu上,但不点击,使下拉栏自动弹出; 点击下拉栏中的el-menu-item,然后观察单独的el-menu-item的背景颜色。
el-menu下面有两个el-menu-item,如果index里面写的是firstPage,点击以后跳转的路径是http://localhost:8080/#/mainPage,如果想跳转到百度该怎么做? <el-menu :collapse="isCollapse" theme="dark" :router=true :unique-opened="true"> <el-menu-item index="firstPage"><i class="el-icon-menu"></i>...
1、<el-menu>是菜单标签,里面可以包括:<el-submenu>和<el-menu-item>。 2、<el-submenu>是子菜单标签,里面可以包括:<el-submenu>和<el-menu-item>。注意:你没看错,<el-submenu>里面可以嵌套包含<el-submenu>。 3、<el-menu-item>是最低级的菜单项,可以被前两者包含。