Spring Boot+Vue前后端分离，如何避免前端页面 404

next();

}else {

if (window.sessionStorage.getItem(“user”)) {

initMenu(router, store);

next();

}else{

next(‘/?redirect=’+to.path);

}

}

})

这个方法有点类似于 Java 中的过滤器，to 表示要去哪里，有点像 HttpServletResponse；from 表示从哪来，有点像 HttpServletRequest；next 表示一个请求继续向下执行的方法，有点类似于 FilterChain。

这里会监控到所有的页面路由/跳转，主要逻辑是这样：

1. 如果要去的地址是 ‘/’，即要去的地方是登录页面，则直接执行 next 方法表示放行。

2. 如果要去的地址不是 ‘/’，那就要看用户是否登录了，如果已经登录了，则先初始化菜单，然后调用 next 方法继续向下走，想去哪去哪。

3. 如果没有登录，则调用 next 方法，跳转路径是 ‘/’，即回到登录页面，同时携带上一个 redirect 参数，这个是重定向的地址，这个参数的作用是这样：例如我本来输入 ‘/aa/bb’，结果因为没有登录，自动跳转到项目登录页面，当我登录成功后，自动跳回 ‘/aa/bb’。

有这个配置之后，就不怕用户乱跳转了，如果没有登录随意输入一个地址，就会回到登录页面。

3. 404问题

---

上面的配置还存在一个 404 问题。

在用户还没有登录的时候，如果他在浏览器输入一个不存在的地址，就会自动回到登录页面，这没有问题，但是用户如果已经登录了，在浏览器输入一个不存在的地址，这个时候就会发生 404，当你没做任何定义的时候，所谓的 404 页面其实就是一片空白。

要解决这个问题，很多小伙伴第一个思路就是能不能在前置路由导航守卫里边做一个判断，当你要跳转的时候，先去判断一个跳转的路径是否存在，如果存在再去跳转，否则就不去跳转。

3.1 动态路由

这个思路看起来没问题，但实际上还有更简便的办法，那就是使用 vue-router 中的动态路由。

举一个简单的例子，我们有一个用户展示的页面，这个页面会根据不同的用户 id 来展示不同的用户数据，所以我们在 router.js 中可以按如下方式来定义路由：

routes: [

// 动态路径参数 以冒号开头

{ path: ‘/user/:id’, component: User }

]

注意这里标记的参数 id 前面有一个 : 。定义完成后，以后像 /user/1、/user/2 都会映射到相同的路由。而像地中的 1 、2 等参数，我们则可以通过 this.$route.params.id 获取。

上面这种是设置一个参数，我们也可以设置多个参数，我们可以参考官方给出的一个表格：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9CBWcZv3-1584424148156)(http://img.itboyhub.com/2020/03/vue-router-1.png)]

如果有多个参数，也可以通过 this.$route.params 来获取参数的值。

注意，在动态路由匹配时，如果我们从 /user/1 切换到 /user/2 ，原有的 User 组件是不会销毁的，这也意味着组件的生命周期钩子函数不会再被调用，那么要怎么刷新数据呢？这个时候我们可以采用 beforeRouteUpdate 导航守卫，在导航守卫中完成数据更新：

router.beforeRouteUpdate((to, from, next) => {

//刷新数据

})

3.2 解决 404

最后，就是我们本文要说的 404 问题了。看懂了前面，如何解决 404 其实就很容易明白了。

我们可以使用通配符 * 来匹配任意路径，例如下面这段匹配格式：

{

// 会匹配所有路径

path: ‘*’

}

这个匹配规则会匹配到所有路径，通常就是用来解决前端页面的 404 问题。也可以自己定义一些前缀，例如下面这样：

{

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！