前言：在上一篇文章中，我们讲了如何开发动态路由和动态菜单，但是之前的项目缺少对嵌套路由的支持。嵌套路由是路由中提供的一种非常重要的路由方式，可以更好的表达层级关系和辅助组件。我们可以在一个组件中快速开发出许多功能部件。这样我们就可以在不跳转的情况下实现主路由，而是实现一个局部的变化，非常好用。使用示例：什么是嵌套路由：嵌套路由vue-router官网有详细介绍。个人理解，就是在主路由上通过""确定一个显示区域，这样我们就可以通过访问主路由下的子路由，来显示之前绑定的display中子路由的内容。在区域内，这样有利于我们开发组件的功能开发。比如我们开发一个用户管理组件，可以通过嵌套路由的形式快速实现用户管理、用户信息回复、用户修改、用户添加等。功能模块的开发。我们可以实现功能区域的快速切换，减少我们自己逻辑的转换。这对我们来说非常有用，尤其是对于一些复杂的接口。和之前分享的区别我之前也发过一个开发框架，可以将动态路由和动态菜单相互绑定，但是之前的UI框架只能生成一些传统的路由和菜单，不支持嵌套路由的生成。嵌套路由生成优化，可以为整个网站提供一个嵌套路由的配置和管理，让我们更快的完成组件功能的开发。嵌套路由和动态菜单功能的优化，让Vue开发框架更加实用，也避免了框架不支持嵌套路由带来的一些障碍影响大家的开发。其次，我们还集成了一些常用的库，方便快速开发和参考。但是，为了方便我们自己的开发，我们在开发适配过程中只集成了JavaScript库，并没有对项目做任何其他的优化和调整，因为每个人的需求不一样，每个项目的需求也不一样，我们尽量不干扰您正常的项目开发。你只需要创建自己的组件，挂载它，然后绑定菜单。集成js库：axios:v0.21.1core-js:v3.6.5echarts:v5.1.2element-ui:v2.15.5vue:v2.6.11vue-router:v3.2.0前期准备：1.我们在src文件在其下新建unitui文件夹，在pages（防止公共页面）、sub（公共组件）、ui（菜单组件）下分别新建三个文件夹。然后我们配置一些常用的公共页面（无需权限）页面，如登录、找回密码、注册和404错误页面。其次，我们在ui文件夹下写了一些菜单区的内容，比如左侧菜单、顶部菜单、底部菜单，这样我们第一步的准备工作就完成了。2.我们在staticassets\json文件夹下创建menu。json和route.json，这两个json文件是模拟登录后后台返回的route和menujson数据。我们可以根据这个json文件生成路由和菜单信息。菜单信息可以直接存储在sessionStorage中，路由信息需要不断生成。3、我们需要创建一个管理路由（路由json信息管理和文件绑定）和菜单（生成和路由路径绑定）的组件。通过该组件，我们可以快速管理路由文件的位置和路由的一些相关信息，如网站标题、访问路径、路由名称、是否显示在框架中等。其次，我们还需要对菜单进行管理。我们动态设置菜单的增删改查访问地址，这样就可以实现一个动态管理的组件。这样我们的前期准备就基本完成了（组件已经内置）。内置管理组件：实现原理：示例：添加路由：添加子路由：菜单部分：添加一级菜单：添加二级菜单二级菜单路由选择：防止丢失刷新组件：我们的基础之后配置，我们会发现我们正常的路由切换是没有问题的，但是在我们产生刷新行为之后。我们的数据会丢失，尤其是添加到路由中的数据会丢失。这时候我们的路由跳转就会导致路由跳转失败。为了防止跳转错误导致的体验问题，我们会在App.vue文件下执行mounted路由的初始函数，将路由添加到之前保存在sessionStorage中的路由信息??中，防止跳转失败。这里也可以判断用户是否登录。
