他分为前端和后端，主要用于公司内部人员管理商品，主要包括登录页面、用户管理、权限管理包括用户角色列表和用户权限列表，不同的人有不同的权限访问，商品管理包括商品分类、分类参数、商品列表、订单管理、第三方插件数据统计echarts,该模块主要用于领导商品销售数据
0.axios封装要求拦截器和响应拦截器
在utils文件内创建request.js文件 然后在request.js内引入axios,使用axios.create方法创建axios实列 在axios,create配置所需的公共地址和超时间 创建请求拦截器和响应拦截器 可以在请求拦截器中获得vuex的token并通过config.header.token将token发送给后台 判断每次发送请求前是否存在token 若存在，则在http请求头的header上加token 后台依据token判断你的登录情况，token一般登录后会存储localstorage里 还可以配置loading我们可以在响应拦截器中加载这个loading加载 响应拦截器是根据接口是否失败或成功返回200代表成功获取数据 还有就是token过期处理 无效token token过期是跳转页面 跳转到登录页面 还有对错误状态码的精细控制，比如code===400 code===401
//配置前置拦截器 Server.interceptors.request.use((config)=>{ console.log(触发前置拦截器)； //token值增加接口的header中区 config.headers['Authorization'] = localStorage.getItem("token"); return config; },(error)=>{ return Promise.reject(error); })//响应拦截 Server.interceptors.response.use(res=>{ //如何处理token过期问题？1.后台响应值需要告诉你，一般后台会定制一个状态码40001 // ,或返回无效token,token过期等 2.提醒用户登录过期，返回登录页面 console.log对成功数据的响应，res); let code=res.data.meta.status //响应状态码 if(res.data.meta.msg=="无效token"){ MessageBox.confirm('token过期, 是否跳转到登录页面？', '提示', { confirmButtonText: 重新登录， cancelButtonText: '取消', type: 'warning' }).then(() => { //原生js方法跳转 location.href='/admin/login' }).catch(() => { }) } ///精细控制错误状态码 if(code===400 || code===401 || code===403 || code===404 || code===405){ Message.error({ duration:1000, message:res.data.meta.msg }) } return res.data },error=>{ // 接口请求、响应错误一般都是网络问题，进行处理 let {message}=error; if(message=="Network Error"){ message="后端接口连接异常"; } else if(message.includes("timeout")){ message="请求系统接口超时" } Message({ message:message, type:"error", duration:1000 }) Promise.reject(error) })用户模块users
add() { this.$refs["ruleForm"].validate(valid => { if (valid) { this.$axios.post("login", this.user).then(async res => { console.log(res); if (res.meta.status == 200) { localStorage.setItem("token", res.data.token); this.$message.success(res.meta.msg); await this.loadRoute(); this.$router.push("/home"); } else { this.$message.error(res.meta.msg); } }); } }); },2.实现退出功能的原
首先，我们绑定一种退出功能的方法，然后elment-ui里复制一个MessageBox弹框 先清空token值 就可以用 localStorage.removeItem("token") 然后跳转到登录页面this.$router.push('/login') 是否退出可以实现
open() { this.$confirm('是否退出？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { localStorage.removeItem("token") this.$router.push("/login") this.$message({ type: 'success', message: 退出成功！' }); }).catch(() => { this.$message({ type: 'info',
message: '已取消退出'
});
});
}3.左侧单布局+实现原理
左侧单布局我们用elment-ui导航侧栏组件进行布局 然后请求接口封装api把接口防止api里面 后台还会给我返回一个path 然后我们通过双层for循坏来渲染这个左侧菜单通过两层for左侧菜单的结果进行渲染出来 就是渲染这children
当我们渲染完成以后当点击的时候就可以跳入另一个页面中 router这个属性（是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转）
<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse="isCollapse" router active-text-color="#ffd04b">
<el-submenu :index="index+'1'" v-for="(item,index) in menus" :key="index">
<template slot="title">
<i :class="icons[index]"></i>
<span>{
{item.authName}}</span>
</template>
<el-menu-item :index="ite.path" v-for="(ite,ind) in item.children" :key="ind">
<i class="el-icon-menu"></i>
<span slot="title">{
{ite.authName}}</span>
</el-menu-item>
</el-submenu>
</el-menu>4.用户管理模块功：
用户管理模块功能分为以下：
1.渲染列表在elment-ui复制一个表格请求接口渲染数据
通过API接口，查询数据信息，把数据渲染到HTML中
2.添加模态框当我们点击模态框的时候弹出模态框 里面添加名字邮箱电话呢些 再把这些进行表单验证功能:rules="rules"
通过$ref来获取校验
//表单验证
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
], email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
], mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
],
},3.编辑功能＋编辑回填数据
先弄一个模态框 给编辑定义一个方法传入呢个scope.row 点击编辑按钮的时候打开模态框 当我们点击每条数据的时候获取前面的数据 进行回填 然后点击确定按钮的时候 请求修改的接口 接口后面写呢个定义的数组 这个数组就是当前要修改的 如果成功的话 就表示修改成功
// 回填
xiugai(row){
this.addFrom=true
console.log(223,row)
this.add_user1={
username:row.username,
password:row.password,
email:row.email,
mobile:row.mobile,
id:row.id
},
this.getUsers()
console.log(
this.add_user1
);
},回填完以后我们在进行 给确定按钮绑定方法请求修改数据的接口
// 修改
addUser1(){
this.$axios.put(`users/${this.add_user1.id}`,this.add_user1).then(res=>{
console.log(res);
if(res.meta.status==200){
this.$message({
type:"success",
message:res.meta.msg
})
this.getUsers()
this.addFrom=false
}
})
},这样就可以完成我们的编辑修改功能
4.删除功能
给删除功能定义方法del使用作用域插槽slot-scope.row
然后下面方法里面复制一个Mesage.box弹框提示删除是否失败的消息
请求删除的接口传入id
代码如下：
5.分页功能
query:查询参数
pagenum:当前页码
pagesize:每页显示条数
我们请求参数传呢个params
定义查询参数列表
分页就说它分为这个前段分页还有这个后端分页
我来解释一下什么叫前段分页
前端分页： 所谓的前端分页就是用请求从后台把所有的数据拿下来， 然后进行分页，如果当数据足够大时，网页就会加载的很慢， 唯一的好处就是只需要向后台请求一次就可以了。 其中： :current-page的值表示当前是第几页； :page-sizes的值表示可以选择一页多少条； :page-size的值表示当前一页显示几条； layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等； :total的值表示共几页； 因为currentPage、pageSize并不是具体的值，所以需要在script标签中的data()中为其进行赋值
后端分页：
后端分页 所谓的后端分页就是数据在后台已经分好页了，前端只需要用请求去获取数据即可， 后端分页的好处是只会把当前页的数据给拿下来，网页加载的速度会很快， 但是不足就是每跳转一次，前端都要向后台发送一次请求。 后台接口要求传入当前页数pagenum,每页条数pagesize。后台会返回总条数total,当前页数 当条数改变时传入条数提交接口，当页数改变时传入页数提交接口 ，然后重新调用数据方法进行渲染 slot-scope 可以获取到tableData这个数据
代码如下：
然后在绑定方法：
5.搜索功能:
搜索就是说给input框绑定v-model 绑定keyword 在data里面定义一下这个可以keyword
然后在进行传值给这个quer${this.keyword} 在按钮呢个里面调用一下方法 这样就可以进行传值
6.分配权限功能 当我点击分配权限的时候 会出现一个模态框 并且重新创建一个新的数组 来放我点击的那一条数据 通过scope。row来获取当前点击的信息 然后给下拉菜单 双向绑定 随便一个值 然后请求 分配 权限的接口 里面穿id值 和rid值 这个rid值就是我下啦菜单我选中的那一条值 然后将值赋值给上面
7.面包屑导航
面包屑就是在elment-ui直接复制就可用 把里面的路由换一下 点击首页的时候跳转到欢迎你来到这个页面
8.添加用户:
添加用户就是说 我们给这个添加用户定义方法add 当我们点击添加用户模态框的时候 就可以显示出来定义一个数组里面放入名字,密码,邮箱.电话 写好 v-model数据绑定add_users数组数据rules这个就是添加自定义校验 prop:对应各个校验字段 然后我们在elment-ui复制呢个表单里面的表单验证最下面有呢个方法把他复制下来 然后我们在请求添加的数据 进行请求接口 后台返回成功的数据加入是201就表示添加成功
代码如下图
用户模块我们就总结完了
权限管理模块roles
1.权限管理分为权限列表和角色列表
我先来总结一下这个角色列表小模块
角色列表模块里面可分为
1.头部就是面包屑
面包屑就是和用户呢个面包屑一样的原理我就不详细呢么接受啦
2.数据渲染
我们首先在呢个elment-ui里找到呢个table表格里面有呢个展开行呢个表单 为什么我们要用这个展开行这个表单 因为里面有个展开行 我们们需要写呢个三级联动 我们还是先开接口 我们写吧角色俩表这个数据给请求到 把他拿到数据 先渲染出来
第一层为角色信息第二层开始为权限说明，权限一共有 3 层权限最后一层权限，不包含 children 属性
3.添加角色
我点击添加用户的时候定义一个add方法 让他弹出模态框 弹出以后 v-model绑定一个数组 在data里面定义角色名称角色描述 这两个的名字可以在呢个接口可以看到 我们在进行校验 当我们为空的时候 就会提示请你输入什么什么内容 然后进行添加用户获取接口如果接口成功则是201就是我们依据请求接口成功 就可以添加用户
4.编辑 +数据回填
先弄一个模态框 给编辑定义一个方法传入呢个scope.row 点击编辑按钮的时候打开模态框 当我们点击每条数据的时候获取前面的数据 进行回填 然后点击确定按钮的时候 请求修改的接口 接口后面写呢个定义的数组 这个数组就是当前要修改的 如果成功的话 就表示修改成功
编辑回填代码如下：
请求修改数据接口：
如果返回的200则他就提示我们修改的数据已经成功
5.删除
删除功能还是跟用户这个删除一样的 就是获取我们id 请求接口就可以 我们就可以删除
6.分配权限
首先我们把这个分配权限手机定义方法点击模态框让模态框显示出来然后复制elmengt-ui里面的树形结构给他复制下面
点击分配权限思路：弹框显示,布局调用el-tree组件, :props="treeProps" 绑定数据里的字 :default-checked-keys="defKeys" 默认选中 2.获取所有权限的数据 const res= await this.$http.get('rights/tree') ,渲染绑定
默认选中如何实现？通过递归的形式，获取当前角色下所有最后一次出现children中的id，并保存到 默认defKeys 选中数组中 。递归会不断的遍历当前角色下childen是不是有值，如果没有，就拿当前层级下的id
提交更新权限-点击为角色分配权限-注意这里调用element两个方法来记录你选中了那些：1个是全选中方法getCheckedKeys()，1个是半选中方法getHalfCheckedKeys,在把它们合并成数组。注意接口提交的时候要的是字符串
.获取当前角色下的所有权限id(通过递归判断当前行里没有children，如果有一直循环),给默认选中数组上
7.三级联动展开行
权限管理的 角色列表这个表格有一个展开行，所以我们要在呢个elment-ul复制一个带有展开行的表格进行复制 先把角色表格给渲染出来 再去渲染里面展开行 - 第一层为角色信息 - 第二层开始为权限说明，权限一共有 3 层权限 第二层权限说明 我们可以用呢个elment-ul分栏间隔来完成布局
1.首先我们先渲染第一次的数据我们可以使用v-for来进行渲染 这个时候我们用作用域插槽slot-scope来找到我们这个 children，scope是我整条数据 然后找到这个数据的孩子 就是scope.row.children来进行循坏,然后使用authName来渲染 到页面上 2.再来渲染第二层的数据 第二层的数据就在第一层的数据的children 然后找到第一层数据item在找到他的children属性 然后跟第一次一样 也进行v-for循坏这个item.children 然后使用authName来渲染到页面上 3.在进行第三层渲染数据 第三层就是第二层的孩子 还进行v-for循坏 将authName渲染到页面上
删除数据: 渲染完数据之后 我们需要点击x号的时候 把我当前点击的那个数据给删除掉,我们需要使用删除角色指定权限的接口， 我需要传入两个值 这个值可以随便定义 一个是角色的值 还有一个是权限的值 我们将这两个值传入到后端 然后将这个两个 值放到请求接口接口里面
权限列表：
权限列表这个就很简单啦 我们就可以直接请求接口 进行渲染数据就可以啦
权限等级我们使用呢个作用域插槽 来进行
我们复制elment-ui里面有一个el-tag标签页我们复制这个 我们可以v-shw来判断就是说
==0的时候我们标签是一 ==1的时候标签为2
商品管理模块goods
商品管理模块分为
1.商品列表 2.分类参数 3.商品分类
我们先说一下这个商品这个模块
商品模块里面有这几个功能：
1.数据渲染列表
我们在elment-ui复制table表格把里面我们要的请求数据的名字写好然后定义一个数组把这些名字放进去 定义方法请求接口获取我们这个数据 .商品分类渲染数据 ，可以请求接口，里面传参，type可以设置要几层数据，pahesize和pagenum页数和条数。
数据请求成功之后我们就可以渲染数据
2.添加商品
我们先从这个elment-ui复制一个表格 数据先给渲染出来 就是请求商品呢个接口 给他获取 出来渲染到页面上
当我们点击添加商品时 ，会跳到add页面 来实现add页面的布局
这个页面我起的是Add页面
1.有一个步骤条和一个tab栏切换 这两个我们都快可以使用elment ul布局
2.我需要我的步骤条和tab切换要一致，我们就可以设置索引值index为0 然后给tab 双向绑定v-model这个index索引值，同时我们给每个tab子项name=“索引值“ ，步骤条调用该索引值。
3.下一步我要做的就是 判断用户从哪里离开的，有没有选择级联菜单，所以我们要配置tab离开属性。可以使用:before-leave这个属性 （离开之前）
// 判断用户从哪里离开 有没有选择级联菜单 要配置tab离开属性
beforeTabLeave(newval, oldval) {
if (oldval == 0 && this.form.goods_cat.length != 3) {
this.$message.error("请选择父级分类3及");
return false;
}
},4.当我们不知道我们所点击的是商品属性还是商品参数的时候 ，我们就可以使用@tab-click来进行判断，并且可以判断点击那个 我们就可以做对应的接口。
// 点击切换时进行验证
async tabClicked() {
// 根据点击哪一个获取相应接口
let cateId = this.form.goods_cat[2];
console.log(this.activeIndex);
if (this.activeIndex == 1) {
let res = await shop({
id: cateId,
sel: "many"
});
// 把数据字符串处理数组渲染
console.log(150, res);
res.data.forEach(item => {
item.attr_vals =
item.attr_vals.length == 0 ? [] : item.attr_vals.split(",");
// 绑定老数据有问题 可以深拷贝
item.newval = JSON.parse(JSON.stringify(item.attr_vals));
});
this.cateListData = res.data;
}
if (this.activeIndex == 2) {
let res = await shop({
id: cateId,
sel: "only"
});
// 把数据字符串处理数组渲染
console.log(150, res);
res.data.forEach(item => {
item.attr_vals =
item.attr_vals.length == 0 ? [] : item.attr_vals.split(",");
// 绑定老数据有问题 可以深拷贝
item.newval = JSON.parse(JSON.stringify(item.attr_vals));
});
this.onlyListData = res.data;
}
},5.上传图片: 我们可以使用upload组件来完成图片上传。
上传图片: successImage这个事件 当我们在里面传一个参数的时候，我们会将获取到临时路径和正式路径。
后端会返回一个pic字段，所以我们需要将临时路径给拼接上去，以此来完成图片上传。
删除图片: removeImage这个事件，她会从我上传成功里面的给删除。我需要的是我所点击的那一条索引值，我需
要通过findindex来获取并使用splice来进行删除。
预览图片:previewImg事件，我们需要从文件流拿到后台返回来的正式地址。来将图片地址给进行赋值。这样就以
此完成图片上传。
6.富文本编辑器:
我们需要下载vue-quill-editor并且引入注册vue-quill-editor
下面就是导入的富文本编辑器
/ 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor); // options可选富文本区域
7.提交商品：
提交商品的时候，我们需要请求接口，并将已有的数据转化为接口所需要的格式 来以此机型提交。接口要的attr数组 里面有静态参数和动态参数，所以我们需要将衙门单独处理再来添加到attrs里面。
// 添加商品
add() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
//将字符串转换为数组
this.ruleForm.goods_cat=this.ruleForm.goods_cat.join(',')
//动态参数
this.moneyTableDate.forEach(item=>{
let onlyVal={
attr_id:item.attr_id,
attr_vals:item.newval
};
this.ruleForm.attrs.push(onlyVal)
});
//静态
this.onlyTableDate.forEach(item=>{
let onlyVal={
attr_id:item.attr_id,
attr_vals:item.newval
};
this.ruleForm.attrs.push(onlyVal)
})
addgoods(this.ruleForm).then(res=>{
console.log("提交的商品",res);
if(res.meta.status==201){
this.$message.success(res.meta.msg)
this.$router.push('/admin/goods')
}else{
this.$message.error(res.meta.msg)
return false
}
})
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}分类参数params
1.我们可以用element-ul里面的tab栏切换来进行布局 我就静态属性还有动态参数我都是分为俩次他们各一个添加模态框还有表格
<el-tabs v-model="activeName">
<el-tab-pane label="动态参数" name="many">
<el-button @click="add">添加参数</el-button>
<!-- 表格 -->
<el-table :data="userlist" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="scope">
<el-tag :key="tag" v-for="tag in scope.row.attr_vals" v-show="tag!=''" closable :disable-transitions="false" @close="handleClose(tag,scope.row)">
{
{tag}}
</el-tag>
<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
</template>
</el-table-column>
<el-table-column label="#" type="index">
</el-table-column>
<el-table-column label="参数名称" prop="attr_name">
</el-table-column>
<el-table-column label="操作" prop="desc">
<template slot-scope="scope">
<el-button type="primary" @click="delet(scope.row)">删除</el-button>
<el-button>修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格 -->
</el-tab-pane>
</el-tabs>下拉选择@change绑定数组[1,2,3]，请求参数列表，传分类catID(数组中最后1个)和选择项tab切换里的属性activename(绑定v-model，通过name拿到) 2.拿到数据渲染，渲染到table表格里，别忘记给prop绑定自己数据字段 3.渲染的tag标签-给外面套一个作用域插槽,作用就是获取到当前行数据，给当前行绑定value,绑定是否可见 4.tag标签输入内容触发方法-把输入的内容加到原来数据里attr_vals里，合到一起提交 5.提交tab标签接口-需要大分类id,属性id,属性名字,tag拼接后的字符串,当前在哪个tab切换里
商品分类categories
选择商品分类这一块是一个三级联动 我们这里只允许为第三级分类添加相关参数。
比如说用户只选择了前两级 那么我们就可以设置动态参数数据，静态属性数据为空，这样就不会渲染数据。
如果选中的是第三级，我们就可以根据所选分类的cateid来获取对应的参数。
我们要获取三级分类的id 可以 绑定数组 当我们的联级菜单发生改变时 改变的值就会放在这个数组里面 就会有三个值
// 级联选择选中项变化 会触发这个函数 渲染数据
async handleChange() {
if (this.selectedCateKeys.length != 3) {
this.selectedCateKeys = [];
return false;
}
获取最后一个id值
this.cateId = this.selectedCateKeys[this.selectedCateKeys.length - 1];
如果activName为many为动态参数，就调用接口
if (this.activeName == "many") {
let res = await attrlist(this.cateId);
console.log(res);
if (res.meta.status == 200) {
this.$message.success(res.meta.msg)
res.data.forEach(item => {
返回字符串 处理成数组
item.attr_vals = item.attr_vals.split(" ");
item.inputValue = "";
item.inputVisible = false;
});
this.userlist = res.data;
}
}
},数据统计reports
数据统计里面有一个数据数据报表 主要是能更明官的看出数据。
01.首先我们需要下载echarts，需要下载4.9.0版本的。
02.我们需要调用接口，来改变需要修改的数据。
<template>
<div>
<!-- 面包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/admin/wecelow' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据统计</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 面包屑 -->
<el-divider></el-divider>
<!-- 卡片 -->
<el-card class="box-card">
<h1>用户来源</h1>
<div id="main" style="width:650px;height:400px"></div>
</el-card>
<!-- 卡片 -->
</div>
</template>
<script>
import { reports } from "@/api/login.js";
export default {
mounted() {
this.get();
},
methods: {
get() {
// 基于准备好的dom，初始化echarts实例
reports().then(res=>{
let myChart = this.$echarts.init(document.getElementById("main"));
// 绘制图表
let a = res.data;
myChart.setOption(a);
})
}
}
};
</script>
<style scoped >
</style>
最后就可以打包优化上线
配置开发环境地址和生产环境 我们一般启动项目的时候是用的npm run serve 但是打包的时候我们用的是build 就是我想修改一个项目 我的接口是本地的接口 修改之后 需要吧项目打包 我就又要吧接口换上线上的接口 这个时候我们就可以通过vue.config.js来配置些不同 的入口路径 输出路径 首先我们创建两个文件第一个env.development代表开发环境本地开发源代码 还有一个是env.production代表生产环境生成1个dist文件夹，需要对这个文件进行体积的优化，然后上传到线上运行的 怎么样区分开发环境和生产环境 在request.js配置 baseURL:process.env.I就是说通过node来获取呢个环境变量的值 然后使用npm run build开始打包 会生成一个dist文件 这个dist文件里面所有的东西就是打包用的 dist里面有css fonts js index.html 如果这个文件夹里面没有index.html 我们就需要在public里面配置index.html fonts里面放图标 css里面放的都是我们在页面里面有一个style 里面写的样式 都在这个css里面 js里面有一个chunk开头的文件 一般就是打包的第三方插件 框架 这个dist文件大小是12,13mb大小 一般公司里面打包上线的大小有2,3mb 然后将echarts和element来抽离出来
打包上线
打包介绍： npm run build 生成打包dist文件。dist文件就是要上线的项目 app.js 一般是打包的main.js里的引入 比如什么vuex router都打包在app.js chunk-vendors一般是打包的第三方插件,框架 elment-ul echares都打包在这个chunk里 Order_Report 一般是路由按需加载的名字 动态加载都配置在webpack里 .map文件 是.js文件的映射镜像 某一个文件里面有源代码占的体积配置一个 // 去除生产环境的SourceMap镜像文件 productionSourceMap: false,
优化打包的体积： 就是把大的体积弄成小的体积就可以通过npm run build -- --report 看打包报告一一进行优化分析 可以查看就是比较占的大的内存 在我们这个vue.confing.js里配置这个如果是生产环境的话让她单独找这个 生产环境的main.js 配置这个externals抽离这个eharts和elment-ul 这个里面的名字要注意就是反过来的 外面的是别名还有一个是键名
动态路由和静态路由
静态路由就是： 我们用的是树性结构 我们要把他拿出来转为列表 动态添加到这个chidren里面 就是说登录的时候用 登录之后先拿这个menuslist没有这个menuslist就声明不了这个动态路由结构所以说先请求这个menus这个数据 吧树状结构升成列表结构 拿到这个数据之后后台返回的是一个树形结构然后我们想办法把这个path给拿出来怎么去拿我们 可以用这个递归去拿它 动态路由一般添加的话都是要的子列表 所以我们要先这个判断条件的时候 数据中这个我们拿到 这个chidren来遍历 如果没有这个children的话我们要吧这个path拿出来 如果有children的话我们就一直 用这个递归 然后children的长度大于0 如果没有children我们就path吧它推到数组 在呢个uilts里面创建一个routerlist 里面声明一个数组然后写一个函数这个函数就是遍历传过来的如果有长度我们就递归就一直调用传的是 当前行的children 如果没有的话我们就拿这个path路径推应到我们的数组 我们把这个name 和path.componet拿出来 然后我们要注意几个常见的问题这个componet这是我们路由赖加载路由单独 用来导入的 第二个就是路径的问题 我们导入这个本地我们写的这个页面给加到这个动态里面 这个path大写的话我们后台返回的就是大写 怎么大写就切第一个ToUpperCase然后吧后台的这个拼接起来这样就会得到一个完整的 结构
动态路由方法：
生成动态路由之后它呢个列表就出来了怎么把它添加路由里面呢 我们可以通过循坏吧每一个值添加到 router里面addrouter 就说获取这个router的实列通过这个方法给addrouter还有一个是addrouters router.addRoute("Home", item)这个home就说组件的名称注意是name名第二个就是每一项这个item就是 数组的每一项加到这个动态路由一块 然后不会被覆盖因为有push 所以会追加