【el-form 组件】
:model="ruleForm" ruleForm是data中定义的存储的是用户名和密码值的对象 通过model传给el-form组件
:rules="rules" rules是data中定义的对象目的是校验用户名和密码的规则
ref="ruleForm" 咱们可以通过ref来获取el-form组件内部的方法 比如：validate校验方法 resetFields重置方法
status-icon 是在表单校验错误的时候 输入框中出现的提示小图标
label-width="200px" 是用来控制用户名和密码文本的宽度
【 :default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单 】
【1 对应了el-submenu index="1"】
【2 对应了el-submenu index="2" 】
【el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项】
【 :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 】
<default-active="/index/users" >
【default-active="/index/users" 表示一进入页面就默认激活/index/user导航菜单
default-active不能直接写死值路径要用变量代替 使用监听器 监听路由解决】
【 ★ :default-openeds 不可以直接使用['1'] 需要使用一个变量openList代替 因为值随时会变 如果写的是['1'] 那么就永远不会改变 会出现点击二级菜单 一级菜单会缩起来的情况】
【 unique-opened 是否只保持一个子菜单的展开 boolean 默认是false】
【 index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传给index】
【因为i是从0开始的 所以需要加1】
{{item.authName}}
【子选项需要改成例如：1-1格式 以字符串的形式传给index属性】
【因为子选项也是一个数组所以需要再次循环】
import axios from "axios";
export default {
data() {
return {
navList: [],
openList: ["1"],
pagepath: "/index/users",
};
},
watch: {
/* 当路由发生变化的时候，就把最新的地址给到pagepath变量
作用是为了保持路由菜单栏的高亮显示 以及解决点击不跳转的bug */
$route: {
handler: function (newV) {
this.pagepath = newV.path;
},
immediate: true,
},
},
created: function () {
this.getNavList();
},
methods: {
getNavList: function () {
axios
.get("/mock/menu.json", {
headers: {
Authorization: localStorage.token,
},
})
.then((res) => {
let { data, meta } = res.data;
/* 数据获取成功 */
if (meta.status == 200) {
this.navList = data;
/* 动态添加路由菜单 */
/* 因为第一个路由是默认，所以我们从第二个路由开始动态添加 */
/* slice不会改变原数据 而splice会 */
let arr = this.navList.slice(1,3);
/* 循环路由数组 动态添加路由 */
arr.forEach(v => {
/* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */
/* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了
如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由
能够被动态的添加 */
v.children.forEach(r=>{
this.$router.addRoute("index", {
path: r.path,
name: r.path,
/* 把名字改成我们页面的名称 例如CategoriesView.vue */
component: () => import(`@/views/${r.path.substring(0,1).toUpperCase()+r.path.substring(1)}View.vue`),
});
})
});
console.log(this.$router)
} else {
/* 防止数据获取失败，给出相应的后台提示 */
this.$message.error(meta.msg);
}
})
.catch((err) => {
console.log(err);
});
},
},
};
