vuerouteraddRoute404细节和坑
在VueRouter中使用动态权限路由时，需要注意router.beforeEach路由守卫的下一个函数的to参数特征。to参数是一个包含名称和路径属性的对象。
name的权重高于path，优先跳转到name指定的路由。
添加新路由后，调用next(to)。
如果静态路由已经包含404页面，则to对象的name属性可能会更改为404路由的名称，导致跳转到404页面。
为了避免这个问题，建议在router.beforeEach中动态添加404页面。
静态路由不包含404，以to对象的path属性作为路由判断的依据。
如果使用next(to.path)或者删除to对象的name值，即使之前没有添加具体的路由，也可能会因为name优先于path而导致跳转到404页面。
正确处理动态权限路由和404页面配置可以有效防止此类问题。
vue项目动态路由怎么做
Vue项目实现动态路由的方式大致可以分为两种：
从后台广播当前用户权限对应的路由表，由前端接收并进行post。
-通过接口调整处理（后端处理路由）两种方法各有优点，我们公司采用第二种方法的原因是公司的项目有专门的用户中心。
里面的逻辑很复杂，很难将权限返回给前端用户在前端进行路由（上面的话是公司后端同学说的）。
很好，为了尝试一下并利用它的功能，我们采取了第二种方法。
菜单名称MainName;菜单指向的资源menuUrl；组件地址，一般是从视图级别开始写）
前端登录并通过接口请求接收到菜单数据后，
namemenPath--->pathmenuUrl---->组件文件转换时，找到组件资源，将menuUrl转换成组件格式，并转换成组件文件。
路由表
可以通过如下方法查看生成的路由表，找到视图下的所有组件资源。
可以再次过滤
当路由表中的某个路由组件在所有组件资源中都没有找到时，将其路径改为/404路由
getRouter.push({path:'*',redirect:'/404',hidden:true});router.addRoutes(getRouter);//动态添加路由
准备任务：配置项目路由文件文件中没有路径，或者有一些公共路由，即没有权限的路由
每个路由都采用组件布局，也就是页面整体布局：左边菜单栏，右边页面，所以children下的第一级路由就是你自己开发的页面。
Meta包含路由的名称和与路由相关的图标，因为它可以有多级菜单，子级下会有子级，路由是数组格式的，需要实际组件；前端组件是:()=>import('@/views/content/classify'),
因为有多层路由出现，所以写一个遍历递归方法来保证这个要求每个组件在后台返回字符串时都会转换为组件对象，加载组件的过程必须封装在一个方法中，而这个方法就是。
用于遍历；查看详情我放置_import_development.js和_import_Production.js文件的目录，项目中Router文件夹下的布局如下，其他文件的目录不同，所以我在遍历时分别处理。
可以自己调整
每次路由拦截之前，输入一个判定，如果发现本地没有路由数据。
使用axios后台获取一次，就可以了获取后，使用localStorage存储，使用addRoutes动态添加路由。
ps：beforeEach有好有坏。
布辛进入了无限循环，浏览器崩溃了。
一旦获得了路线，就可以直接执行next()。
global.enter路由器的目的是将数据传递到左侧菜单。
渲染组件
上面的第三步将为global.enrouter赋值，这是一个全局变量（从菜单中获取路由并渲染它
）。Vue动态添加用户的权限路由（动态路由）
本文介绍如何在你的Vue项目中动态添加用户权限路由，实现动态路由管理。动态路由的实现分为四步：首先，路由分为三部分：恒定路由、异步路由、任意路由。
恒定路由对所有用户可见，异步路由根据用户角色动态加载，任意路由路径错误时重定向到404页面。
其次，根据登录的用户信息动态添加路由。
该步骤依赖于获取用户信息并进行路由添加操作。
第三，菜单动态渲染，反映动态路由情况，保证用户界面和权限配置的实时同步。
最后设置全局前卫router.beforeEach，在用户信息或者路由信息丢失时进行检索，解决页面刷新时数据丢失的问题。
在实现过程中，有几个要点需要注意：使用router.addRoutes()函数添加新路由时，请确保不要重复定义同名路由，以免出现警告。
添加新路由后，必须手动修改router.options.routes，因为动态路由添加到router.addRoutes不会自动更新此选项。
页面刷新后，vuex数据和动态路由可能会丢失，必须重新添加和更新路由信息。
访问动态加载的路由时，您可能会遇到白屏问题。
解决办法是取消当前导航，返回路线。
了解next()、next('/logon')、next(to)和next({ to,replace:true})的不同用法对于正确处理导航至关重要。
Replace:true设置用于防止刷新页面时通过浏览器的后退按钮返回。
请务必在完成addRoutes()操作后执行下一个beforeEach守卫，以避免由于错误输出而导致无限循环。
在处理动态路由时，要保证子路由和父路由的关联正确，避免因为父路由没有被选择而无法访问子路由的问题。
最好将所选子路由的父路由信息发送到后端，以保证路由系统的完整性。
使用ElementUI的树形控件来处理选中和半选中的节点，无需更改源代码，可以直接获取关键信息。
通过以上步骤和注意事项，您可以有效地为您的Vue项目添加用户权限路由，提高应用程序的灵活性和用户体验。
vue3admin保姆教学指南｜登录和菜单权限的实现
在后端项目开发中，权限管理和安全很重要，是项目之初就构建的核心功能。我的目标是根据用户权限动态创建路由并根据权限调整侧边栏。
下面我就分享一下登录和检查菜单权限的基本思路。
首先，登录过程包括用户输入帐号和密码，通过验证，然后发送获取令牌的请求。
接下来，我们使用令牌获取用户详细信息并根据他们的权限检查菜单。
登录成功后，根据RedirectUrl进入首页，并将token和用户信息保存到localStorage中。
该实现使用pinia来存储数据。
定义userStore时，预设需要存储的token和userInfo，并声明相应的接口。
要实现登录功能，只需在登录页面设置输入框和按钮，点击即可，然后勾选并调用登录接口即可。
验证成功后动态路由和权限设置尤为重要。
登录成功后，全局路由钩子router.beforeEach会在访问前拦截每条路由，判断token和用户信息，并进一步处理菜单权限。
如果用户信息不存在，则执行初始化逻辑获取用户信息和菜单，并根据权限动态添加路由，保证权限控制的实时性。
实现权限控制需要前端和后端的配合。
前端与后端的用户权限数据交互以动态创建或过滤路由。
具体来说，前端定义了静态和动态路由，并根据用户的角色权限动态挂载路由。
权限管理模块负责配置业务内菜单、角色、用户之间的关系，并实现权限分配。
最后，权限指令、挂钩和组件提供了一种灵活的权限控制方法。
整个流程完成后，可以实现自定义路由和侧边栏展示，保证项目的安全性和可维护性。
