在搭建后台管理系统的过程中，遇到一个问题，404页面会出现不正常：用户直接输入url访问，出现404页面。这是一个比较糟糕的情况。用户点击打开A链接，是404，用户体验很差。因此，对这个问题进行了分析和解决。关键是这是一个后台管理系统，路由是前端根据当前用户角色动态生成的。需要对其进行控制，使其无法访问其无权访问的页面。预期解决方案：如果用户没有登录，则跳转到登录页面，登录后，跳转到指定页面。如果用户已经登录，则根据权限判断是去指定页面还是首页。分析思路：404是用户访问路由表中没有设置的路径时出现的页面。在函数中判断目标路径，重定向可以解决问题：1、对于用户打开新的浏览器窗口进行输入（即未登录）的情况，跳转到登录页面，根据是否有进行判断目前是动态计算的路由数组，也可以判断router.beforeEach(async(to,from,next)=>{if(from.path==='/'&&!util.cookies.get('savedRouteList')){next({name:'login',query:{redirect:to.fullPath}})}}2、对于用户已经登录系统，浏览器打开一个新的tab输入url的情况，是根据路由表中是否存在目标路由来判断的，即只需要判断目标路由是否为404页面，直接访问已经存在的路由，无需操作router.beforeEach(async(to,from,next)=>{//这里不要用from.path来判断//因为浏览器首先访问目标页面，如果不存在，则转到404页面，然后from.path成为目标页面的路径if(from.name===null&&to.name==='notFound'){this.$message.warning('您没有访问当前页面的权限，您已被重定向到主页')constfirstAccessedRoute=store.state.d2admin.user.accessedRouters[0].children[0].name//访问当前权限路由在第一个路由中，如果为空，则返回登录页面next({name:firstA访问路线||'login'})}}完整代码：router.beforeEach(async(to,from,next)=>{if(from.path==='/'&&!util.cookies.get('savedRouteList')){next({name:'login',query:{redirect:to.fullPath}})}if(from.name===null&&to.name==='notFound'){this.$message.warning('您没有访问当前页面的权限，您已被重定向到主页')constfirstAccessedRoute=store.state.d2admin.user.accessedRouters[0].children[0].namenext({name:firstAccessedRoute||'登录'})}}
