Vue项目实现动态路由和动态菜单，构建插件开发框架。但是权限匹配的一般实现是通过菜单下的权限参数和路由守卫进行验证拦截和权限匹配，但是安全性还是不够。因为我们把route/index.js里面的路由都填满了，这样不仅会造成静态路由内容过多，不好修改，而且当静态路由内容过多的时候，我们路由中的内容会变得非常复杂的。后端对前端的控制也比较薄弱，无法做到严格控制。由此我们发现，通过动态路由来控制是必然的。这时候我们只需要通过后端获取数据菜单和路由信息json，然后动态添加路由生成菜单，将菜单与动态路由内容进行匹配即可。这样，我们就可以实现前端的菜单和路由都由后端来控制。我们的项目往往只需要构建一些不需要权限的常用页面组件，比如登录、注册、忘记密码、404错误等。动态路由和动态菜单项的第一个好处是我们可以将我们的任何组件做成一个插件。我们只需要将写好的组件放在我们的view视图下，然后我们就可以通过动态路由和菜单来添加路由和匹配菜单，这样我们就可以访问插件了，我们减少了对route/index.js的内容写入也有利于减少内存占用。二是有利于保障安全。通过动态路由的形式，我们生成的菜单权限更加完善，不仅依靠菜单和路由守卫拦截鉴权，还通过动态路由动态加载vue文件，控制更深。第三，我们可以实现团队的发展。通过动态路由的形式，我们可以将项目分发给不同的人来完成，方便组建开发团队，因为他们开发的组件我们只需要基本的javascript库即可。我们可以通过直接挂载动态路由和生成菜单的方式完成项目配合，减少了对route/index.js文件的操作，保证了项目的完整性。最后发现在非node环境下的开发条件下，我们可以实现远程vue文件加载，这不仅为我们的开发提供了方便，还可以帮助我们及时修改文件以满足项目的需要，并且是更有利于保证安全，实现服务器vue文件加载。开发环境配置信息Vue：2.6.11。Vue路线：3.2.0。部分实例组件的首页聊天动态路由和动态菜单项的部分实现原理首先，我们通过后端返回的一个路由json数据，通过前端生成一个符合路由静态内容数组的数组，以及然后通过addRoute循环添加进去，我们这样就生成了动态路由。获取登录时后台返回的菜单信息，生成一个循环的菜单，至此我们的一个动态项目就完成了。二是如何管理动态路由和菜单项。我们可以先通过构建一个组件，添加路由信息和管理菜单来实现两者的动态匹配。我们只需要添加和修改路由信息，并将菜单相互匹配，就可以实现简单的路由挂载。组件管理菜单管理此时提交数据的后台由后台保存。我们此时的组件只需要放在views文件夹下，添加路由加载文件，我们就可以实现路由管理了。示例部分第一个着陆页配置。我们需要在static文件夹下创建一个menu.json和route.json。两个json文件模拟服务器登录时返回的数据，我们在登录页面模拟获取数据后，通过menu的一个方法生成menu，通过routing的方法生成一个route数组添加到一个循环，然后执行路由跳转。第二个配置路由初始化内容。我们把route/index.js的路由信息??填空是很不合理的，会报错，因为路由初始化在加载之前就已经完成了。有些页面根本不需要权限就可以访问，比如登录、注册、找回密码、404错误。对于不需要权限的页面，我们还是需要以静态的形式直接写在route/index.js文件中。索引初始数据importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)constroutes=[{path:'/',//accessurlname:'login',//路由名称component:()=>import('@/unitui/pages/Login.vue'),//加载模板文件meta:{show_site:0,//是否全屏显示web_title:"login"//站点标题}},{path:'/register',//访问urlname:'register',//路由名称component:()=>import('@/unitui/pages/Register.vue'),//加载模板文件meta:{show_site:0,//是否全屏显示web_title:"Register"//站点标题}},{path:'/forget',//访问urlname:'forget',//路由名称component:()=>import('@/unitui/pages/Forget.vue'),//加载模板文件meta:{show_site:0,//是否全屏显示web_title:"找回密码"//网站标题}},{path:'/404',//accessurlname:'404',//路由名称component:()=>import('@/unitui/pages/404.vue'),//加载模板文件meta:{show_site:0,//是否全屏显示web_title:"404error"//站点标题}},]constrouter=newVueRouter({routes})router.beforeEach((to,from,next)=>{document.title=to.meta.web_titleconsole.log(to);next()})exportdefaultrouter三、关于防止刷新后丢失。我们需要在app.vue文件中的methods方法中定义一个路由生成方法。示例：init_route(){//初始化路由，防止刷新丢失if(sessionStorage.getItem("route_data")!=null){//只有当后端有返回数据才允许生成constroute_data=JSON.parse(sessionStorage.getItem("route_data"));//获取路由信息constdata=[];//默认路由数组for(letindex=0;index
