第三章 项目实践2--通过路由改变menu以及通过路由实现权限
2019-08-24 本文已影响0人
DOGirl
1，通过递归路由实现左侧menu菜单栏的渲染，但是在路由中配置的并不需要全部渲染，要怎么整呢？可以添加一个标志位，将不需要的给过滤掉，通过判断路由中是否有name来挑想要渲染的。
同时form表单中的子路由，如果不需要渲染那么也可以通过再添加另外一个字段。，但是将form表单的子路由隐藏后，依然希望能跳转路由后能不能加上选中状态
image.png
delete newItemChildren是？？？
image.png
image.png
image.png
使用default开头的一定要注意一个坑，就是这个只在初始化第一次时有效，后期无论怎么改变都不行，这里突然让我想到了当时用element-ui改变menu时遇到的坑，即使js执行了，但最终还是没有生效。这里组件的设计思路就是借用react的受控组件和非受控组件
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
该节总结：1，路由灵活使用 ，尤其是结合导航的各种写法 2，watch的使用，监听路由
3，.sync修饰符实现双向绑定
通过路由实现权限控制 --新建一个utils的工具文件夹
image.png
判断路由是否有权限，通过元信息和路由守卫
image.png
image.png
自己可以安装lodash，这个是干什么的？？？？？
image.png
image.png
路由有个match匹配的方法
image.png
image.png
image.png
image.png
image.png
没有权限时给个提示，在router中直接使用，要手动导入·
image.png
image.png
