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

[](()2.存在的问题

---

当前后端分离之后，对于前端所承担的职责，大家可能会面临一个问题：如果用户直接在地址拦输入某一个页面的路径，怎么办？

此时，如果没有做任何额外的处理的话，用户确实可以通过直接输入某一个路径进入到系统中的某一个页面中，但是，不用担心数据泄露问题，因为没有相关的角色/权限，就无法访问相关的接口，即使进入到相关的页面，也看不到数据。

但是，如果用户非这样操作，进入到一个空白的页面，用户体验不好，冒出来一个空白页面，有的用户就手足无措了。

此时，我们可以使用 Vue 中的前置路由导航守卫，来监听页面跳转，如果用户想要去一个未获授权的页面，则直接在前置路由导航守卫中将之拦截下来，重定向到登录页，或者直接就停留在当前页，不让用户跳转，也可以顺手再给用户一点点未获授权的提示信息。

以 vhr 中的代码为例，我在 main.js 中定义了前置路由导航守卫：

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

if (to.path == ‘/’) {

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)]

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】

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

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

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