vue 实现动态渲染菜单

在很多情况下我们的菜单是写死的,然后通过路由路径跳转到所对应的页面，类似于这样的。

下面是普通的一级菜单和二级菜单的写法：

//一级菜单


    通知
    问卷
    历史通知

现在新的需求是，一级菜单和二级菜单都需要动态生成，根据后台给的数据生成动态菜单。

接口格式数据：

实现代码：

：index可以读取url里面的路由来实现跳转。

二级菜单可以通过v-if判断里面是否有数据来决定是否显示。

里面的对应菜单数据就需要前端去判断获取了。

//动态一级菜单


//动态二级菜单

    
    

此外还有一种特殊情况，原本使用a链接去跳转的菜单，并不是使用路由跳转。

       电子班牌

这种情况我们要做动态菜单，我们只要获取数据里的detail，也就是获取菜单的名字，并不需要url(可以为空)，因为我们已经有链接跳转。