NavMenu 导航栏 主菜单对应页面实现方法

常见的菜单栏:


菜单栏结构


            一般来说 这种结构的菜单栏形式 通过<el-menu></el-menu> 内部包裹<el-menu-item-group></el-menu-item-group>或者<el-submenu><el-submenu>标签的形式  实现父子级菜单栏的展开关闭,最内层<el-menu-item></el-menu-item>  就可以实现多级菜单栏。

            但是,如果考虑主菜单 也必须展示对应单页面的图表数据,就无法做到。这时候考虑Router属性了。


实现步骤:

1.首层menu标签赋予 router属性,等同于vue的router-link


Router参数说明

2.open属性方法在于获取输出的key值,此方法参数为key(string),keys(array)


open点击事件

3.获取到open事件的值后,进行router跳转


key值为形参,实质是index/path值

这样就能完成主菜单或父级菜单点击后打开对应页面的操作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容