vue配置文件自动生成路由和菜单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue配置文件自动生成路由和菜单相关的知识,希望对你有一定的参考价值。

参考技术A 每次重复写路由的时候是不是会觉得很烦,特别是项目大的时候,路由会有特别多,看都看不过来,所以这里我是有了一个router.json的配置文件来对路由做一些简单的配置,然后让路由和左侧菜单栏可以同时自动生成。

主要配置项如下:

配置主要分为两部分,一部分由于菜单生成,一部分用于路由生成,当然两者也有共用的部分

左侧菜单便是自动生成的,点击菜单栏也会跳转到对应的路由地址,当然,样式有点丑,但样式的话可以自己后续再调整。
这样的话,我们新加菜单的时候只需要在配置文件中配置好,就可以直接写编写页面,这样也给我们省下了很多时间。

Vue实现动态路由

参考技术A

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种

(1)、简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,前端渲染使用

到这里,整个动态路由就可以走通了,但是页面跳转、路由守卫处理是异步的,会存在动态路由添加后跳转的是空白页面,这是因为路由在执行next()时,router里面的数据还不存在,此时,你可以通过window.location.reload()来刷新路由
后端返回的路由格式:

注意: vue是单页面应用程序,所以页面一刷新数据部分数据也会跟着丢失,所以我们需要将store中的数据存储到本地,才能保证路由不丢失。关于vue页面刷新保存页面状态,可以查看 vue如何在页面刷新时保留状态信息

以上是关于vue配置文件自动生成路由和菜单的主要内容,如果未能解决你的问题,请参考以下文章

qianKun + VUE 实现微前端架构 (基于vue2实现)

vue项目级路由架构带你从零搭建 [新手秒懂]

vue 左侧菜单展示,以及对应的路由配置

Vue实现动态路由

Vue-cli-4-路由配置文件,路由进阶,二级路由

VUE系列之路由配置