1.为什么要从路由守卫中获取个人信息
刷新页面会产生路由跳转 后台系统不合适把个人信息持久化处理 页面一刷新就没有了 所以放到路由守卫中 系统刷新自动取出个人信息
2.后台管理系统的动态路由(不同人进入页面 页面内容不同) 做法：在路由里分静态（白名单）和动态路由 然后拼接
// 省略其他...
// 动态路由表，项目中不同的用户可以访问不同的功能
+ export const asyncRoutes = [
// 先空着这里，后面来补充功能
]
// 静态路由表，项目中每个用户都可以访问的功能
export const constantRoutes = [
// 省略....
]
const createRouter = () => new Router({
// 控制路由滚动行为 滚动到顶部
scrollBehavior: () => ({ y: 0 }),
// 组合到一起组成路由表
+ routes: [...constantRoutes, ...asyncRoutes]
})
3.找不到的都到404
4.路由导航里加一个name 作用之后补充
5. 把子页面('departments')包在layout里面 即把子页面当做layout的children, path为空 // 默认展示内容即子页面('departments')
效果：
6.为什么菜单栏直接出现了
7.双击选中 ctrl+d
8.this.$router.options.routers
this.$router.options
routers最终的总路由
9.404为什么没出现
10.document.title
document.title 设置的就是这个
1.Vue中涉及到表单数据回填一定会遇到的一个问题就是当第一次点击编辑时把某些必填项清空,点取消,再次点击此项的编辑发现是上一次的状态,没有有效出现正确的编辑状态,这时候可以把v-if用在子组件上,达到创建销毁效果,推荐使用这种方式,还有一种方式是在子组件中定义一个清空表单数据方法, 在父组件中点击编辑时，直接通过引用的方式去执行子组件中的加载详情功能，初始化表单数据 弹层隐藏时，清空表单数据
2.ES6模块化的导入导出方式
- 通常有两种方式导出export(导出), export default(默认导出)，通常采用import导入
- 第一种导入方式 export(导出)
- 第二种导出方式 export default(默认导出)
导入
3.Element-ui 中的dialog组件
关于这个组件 有一个需要注意的就是他有四种关闭方式
为了防止用户误操作 需要手动关闭前两种方式
复制代码
4. 点击事件不起作用的话加个.native
5. 多选框有个prop需要注意
6.点击的时候获取某项数据 然后弄到data里这样可以传给子组件
7.参数还可以这样传进去
8.表单验证 只处理了rules 没处理model
9.接口写法
10.created的一个小问题
解决方案2：在父组件中通过引用找到子组件
在父组件中，每次打开弹层时，找到子组件，要求它去发请求获取详情
复制代码
添加引用:
<DeptDialog
:id="curId"
ref="deptDialog"
:is-edit="isEdit"
@success="hAddSuccess"
/>
复制代码
在编辑时：找到子组件，要求它去发请求获取详情
// 用户点了编辑
hEdit(id) {
// 1. 保存当前操作的部门编号
this.curId = id
// 2.显示弹层
this.showDialog = true
// 3. 修改isEdit
this.isEdit = true
+ // 获取子组件的引用
+ this.$nextTick(() => {
console.log('获取子组件的引用', this.$refs.deptDialog)
console.log('当前的curId', id)
console.log('获取到子组件中的id--从父传入的', this.$refs.deptDialog.id)
// 调用子组件的方法
this.$refs.deptDialog.loadDepartmentDetailById()
})
},
复制代码
删除子组件的created中的请求详情的代码
created() {
this.loadEmployeeSimple()
// 如果是编辑
// 发请求获取当前部门的详情数据
- if (this.isEdit) {
- this.loadDepartmentById()
- }
}
复制代码
