美文网首页
第三章 项目实践2--通过路由改变menu以及通过路由实现权限

第三章 项目实践2--通过路由改变menu以及通过路由实现权限

作者: DOGirl | 来源:发表于2019-08-24 10:23 被阅读0次

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

相关文章

  • 第三章 项目实践2--通过路由改变menu以及通过路由实现权限

    1,通过递归路由实现左侧menu菜单栏的渲染,但是在路由中配置的并不需要全部渲染,要怎么整呢?可以添加一个标志位,...

  • Vue动态添加路由

    开发一个不同用户不同权限显示不同菜单项目 , 需要实现不同权限添加不同路由 通过前置路由守卫router.befo...

  • vue 菜单路由权限

    实现思路 通过一个 uid 请求后端路由权限接口 后端返回对应的路由权限给前端 json 转树形结构 树形结构数据...

  • react router

    一、路由基础组件 1、路由优势:只需要一次请求。2、路由实现原理:a标签改变url,但阻止默认跳转的请求,通过e....

  • vue router 路由专题

    一、前端路由前端路由的核心是改变url 但是页面不进行整体的刷新如何实现改变url 但是不刷新整个页面方法一:通过...

  • 模拟面试问题总结

    AngularJS路由实现原理 Angular路由 允许我们通过不同的URL访问不同的内容,并且Angular路由...

  • 模拟面试问题总结

    AngularJS路由实现原理 Angular路由 允许我们通过不同的URL访问不同的内容,并且Angular路由...

  • RIP1、RIP2配置(HCNA实验指南)

    RIP路由配置 一、学习RIP路由配置 效果:路由器之间通过rip学习路由,可实现路由器与loopback之间的访...

  • 使用 umi + dva 搭建 react 项目

    起步 首先通过 umi 快速创建项目 启动项目 路由 通过配置文件配置路由直接在.umirc.ts 的 route...

  • vue-9

    通过watch实现路由监听 导航守卫

网友评论

      本文标题:第三章 项目实践2--通过路由改变menu以及通过路由实现权限

      本文链接:https://www.haomeiwen.com/subject/tfjfectx.html