任务:要做一个类似下图的导航菜单
在这里插入图片描述
1.去官网找到对应的模板代码
代码如下所示:
在这里插入图片描述
附上官网链接

这里首先要说一下被我注释掉的<a-menu-item-group>
加上的话呈现的效果是这样的:
在这里插入图片描述
不加呈现的效果是这样的:
在这里插入图片描述
所以,被我注释掉啦。
其次再说一下<span slot="title" class="submenu-title-wrapper">里面的class,一定要保留,并且要和官方的一致,否则呈现不出下拉的效果。
最后(最重要) 要想使下拉菜单的内容都可点击,需要在最外层写上点击事件即<a-sub-menu class="right" @click="handelClickLink">,这样就不用在每个菜单下写啦。

2.写路由跳转
首先在router文件下的index.js下引入路由信息:
在这里插入图片描述
在这里插入图片描述
其次在原组件下的写入点击事件的方法,使之可跳转到相应组件(页面),代码如下:
在这里插入图片描述
这里强调一下push里面的参数,
“/index/”,若不在index/前面加“/”,表示在当前url下加上"index/",此时虽然在主界面可跳转到相应界面,但是一旦打开其他界面,再点击此导航菜单里的任意事件,就不能跳转到正确界面;若加上“/”表示从根目录下的"index/"跳转,此时就可以正常跳转啦!
关于item.key的疑问,key使item自带的唯一标识,只要你触发点击事件,就可自动生成一个key值,然后传参,完成跳转。可参考如下的官方文档:
在这里插入图片描述
最后写相应跳转的页面就ok啦!

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐