Vue-admin-template动态加载路由和菜单

本人是php 后端的，想搭建一个好一点的系统后台，奈何技术有限，然后又去专研了一下vue，发现了一个比较好用的vue的后台系统模板,vue-element-admin,每个人有每个人的需求，我选择了基础的模板,vue-admin-template，由于这个模板是前端根据后端的角色显示的动态菜单，有点不太符合个人的意愿，我想通过获取接口的路由表生成对应的动态路由

PS：想用好每一款的框架，都必须去了解入口和配置,路由，和加载方式等等，从而能掌控它

1、现在开始准备工作

1.下载Git
2. 安装好node.js
3. 运行一下命令 git clone 下载项目文件 安装依赖

运行成功

打开http://localhost:9528 出现以下画面

这个时候 我先讲一讲它的运行，纯属个人见解

看完配置项以后我们来看一下他的流程是怎么样去走的
刚刚是打开的是登录的页面，那么我们从视图的文件开始入手找到src/views下面找到登录的页面

找到了login应该就是登录的视图文件了

进入里面查看对应的代码观察其走向，首当其冲的应该是去看请求是如何发起的

果不其然store文件夹下面是有user文件的那么我们打开看看里面是否有login






大致上已经是梳理完了，但是感觉好像是遗漏了什么，例如路由守卫，等等，百了一下，是在
premission.js里面，开始改造。

先改造登录,前面已经了解完了那么先打开配置文件看一下

1、打开vue.config.js文件注释掉before: require(’./mock/mock-server.js’),关闭eslint

2、刚刚那个axios里面有基础的配置接口路径盲猜在开发环境打开 修改接口请求地址，这里填你们的接口地址
3、配置完成以后重启一下项目npm run dev,因为修改了环境会对项目产生影响

4、找到登录页面，取消验证规则，因为他的验证规则只针对管理员和超级编辑者对于我们接口的账号它会认为不合法

5、下一步去找到api/user.js/修改api地址接口路径的后缀

我的接口路由是这样的 用的是thinkphp 5.0,你们用什么语言，然后要根据什么语言去搭建对应的路径和接口
6、修改store/modules/user.js接口的参数或者不变

我的接口是user_name pass_word 所以我改了，现在就可以登录了 ，但是登录会报错，下面还有个获取个人信息的接口，需要返回的东西是头像,姓名.还有别的，我们先模拟

2、开始改造路由 删除多余的路由

1、打开route/index.js,删除多余的路由

2、去写一个接口去获取路由表 打开api/user.js 改造一下

3、去store/modules/user下面改造一下储存一下获取到的路由表

在方法体里面加入获取路由表方法取得数据做处理,需要404页面的也往里面插入
4、去到store/getters.js新增一下数据源

5、东西都弄好了，还有路由守卫哪里要进行路由过滤和添加组件
在router里面新建两个文件

进入这里修改代码

红色圈的是新增代码并且把next()注释掉

在最底部新增方法

PS:要注意了 要在视图文件加 system/menu/index

修改一下nav导航

3、踩坑就是你的数据源有的数据必须要建立相对应的组件不然会报错，其次就是数据的处理。php的json_encode不能直接使用会出现，转义并且没有编码和 /等，要这样写

这是我的代码返回的数据
效果如图：

第一次写这类型的不知道从何说起 可能有点乱，不懂的可以私信一下，就。先这样了 拜拜了您内