ant design of vue 中的导航菜单及路由设置问题

任务：要做一个类似下图的导航菜单

1.去官网找到对应的模板代码
代码如下所示：

附上官网链接

这里首先要说一下被我注释掉的。
加上的话呈现的效果是这样的：

不加呈现的效果是这样的：

所以，被我注释掉啦。
其次再说一下里面的class,一定要保留，并且要和官方的一致，否则呈现不出下拉的效果。
最后（最重要） 要想使下拉菜单的内容都可点击，需要在最外层写上点击事件即，这样就不用在每个菜单下写啦。

2.写路由跳转
首先在router文件下的index.js下引入路由信息：


其次在原组件下的写入点击事件的方法，使之可跳转到相应组件（页面），代码如下：

这里强调一下push里面的参数，
“/index/”，若不在index/前面加“/”，表示在当前url下加上"index/"，此时虽然在主界面可跳转到相应界面，但是一旦打开其他界面，再点击此导航菜单里的任意事件，就不能跳转到正确界面；若加上“/”表示从根目录下的"index/"跳转，此时就可以正常跳转啦！
关于item.key的疑问，key使item自带的唯一标识，只要你触发点击事件，就可自动生成一个key值，然后传参，完成跳转。可参考如下的官方文档：

最后写相应跳转的页面就ok啦！