参考:https://element-plus.gitee.io/zh-CN/component/menu.html#menu-attributes default-active:页面加载时默认激活菜单的 index,数据类型:string 之前配置了静态路径default-active="/",每次刷新当前页时 url 依然是当前页的,但是渲染却是首页的内容。 想要刷新页面依然停留在当前页,需要改为动态获取当前路由的路...
1.element-ui侧边栏实现路由跳转 关键代码: 在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router---或者router=true 1. 2. 3. 这是一个侧边栏: <el-menu :default-active="this.$route.path" router> <el-submenu index="2"> <template slot="titl...
原因:当路由地址发生变化时,想要对应的高亮显示的菜单项发生变化,只需要设置 :default-active="$route.path"即可,但是当跳转的路由(父路由)包含子路由(即包含另一个导航时),且父路由设置了默认显示的子路由,此时父路由对应的菜单项就无法正常高亮显示,因为父路由设置了默认显示的子路由,当前路由地址就变成了子路由...
经检查route.path是正确的,二级目录数据也是正确的; 所以把问题定位到dom加载及渲染顺序上 个人想法:既然数据都是正确的,很有可能就是因为dom还未更新完成,就重新设置了default-active属性,导致匹配不到相应的导航 解决方法来了 给二级目录设置v-if <el-menu v-if="showDom" router :default-active="$route.pa...
方式三:使用 element plus 菜单的 router 进行路由 <template><el-container><!-- Element Plus Menu: https://element-plus.gitee.io/zh-CN/component/menu.html --><el-menuclass="el-menu-demo"mode="horizontal":default-active="$route.path":ellipsis="false"router><el-menu-itemindex="/aichat">...
遍历路由通过element-plus的Menu组件生成菜单导航,完整的代码如下: <template> <el-menu default-active="0" :unique-opened="true" class="el-menu-vertical-demo" > <templatev-for="(item, index) in menuList":key="index"> <router-link:to="item.path"v-if="!item.children":key="index">...
简介:ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法 这里的activeIndex要设置,return要有返回的activeIndex的内容 <template><el-container><el-header><el-menu:default-active="activeIndex"class="el-menu-demo"mode="hor...
丰富的组件库:Element-Plus 包含了大量的 UI 组件,涵盖了常见的表单组件、布局组件、导航组件等。 自定义能力强:通过简单的配置,开发者可以自定义主题颜色、字体样式等,以适应不同的项目需求。 一致性设计:Element-Plus 保持了一致的设计风格,使得不同组件之间的交互体验更加统一。
解决办法是给menu的default-active绑定route.path形如:<el-menu :default-active="$route.path" ...>每次渲染menu都会读当前path 设置为default-active
app.use(ElementPlus).use(router) 配置和生成 新建src/types/index.d.ts,内容如下,主要定义菜单的数据类型。 interfaceIMenu { name:string desc:string key?:number[]//菜单权限(1:管理员|11:游客),没有配置或者为空数组则所有角色都有权限 route?:string//路由 ...