vue router嵌套路由在history模式下刷新无法渲染页面

Vue Router嵌套路由在history模式下刷新无法渲染页面的解决方法及其原理

一、背景介绍

在使用Vue Router进行前端路由管理时，我们常常会遇到一个问题：在hash模式下，url需要带“”符号，这既影响了页面的美观，又在某些场景下可能造成问题（如微信分享页面会将""后的内容处理掉）。我们选择了history模式，并请后端修改了nginx配置。但在使用嵌套路由时，刷新页面出现了异常。

二、问题描述及异常

在使用vue-router的history模式并设置嵌套路由后，访问路由和嵌套路由页面显示正常，但在刷新页面时，嵌套路由页面出现异常。页面样式全乱，查看页面请求加载的静态文件，发现所有静态文件都返回404错误。

这个问题产生的原因在于，在hash模式下，根路径是固定的，而切换到history模式后，根路径会跟随当前路由动态变化。如果我们像之前hash模式下那样，在index.html文件中直接通过"./static/x"的方式引入静态文件，那么在history模式下，这些文件会因为路径问题无法被正确加载。这是因为，“./”代表当前目录（相对路径），而在history模式下，以“/”开头的嵌套路径会被当作根路径。因此使用“./”引入文件会找不到文件，因为文件本身就在项目根目录下，并不在嵌套路径这个目录下。

三、解决问题

解决这个问题的办法其实很简单，只需要修改静态文件的引入方式即可。原本我们在index.html文件中使用"./static/x"的方式引入静态文件，这种方式在hash模式下可行，但在history模式下就不可行了。我们需要将静态文件的引入方式改为“/static/x”，也就是从项目根目录引入静态文件。无论hash模式还是history模式，都可以直接使用“/”从项目根目录引入静态文件。这样修改后，刷新页面就能正常加载嵌套路由下的静态文件了。

四、原理分析

为什么使用“/”就能从项目根目录引入静态文件呢？“/”代表的是根目录（绝对路径），也就是项目的根目录。无论是hash模式还是history模式，根路径都是固定的，指向项目的根目录。无论当前路由是什么，使用“/”开头的路径都会从项目根目录寻找文件。这就是我们解决问题的关键。

以上就是关于vue-router嵌套路由在history模式下刷新无法渲染页面问题的解决方法及原理的。希望对大家的学习有所帮助，也希望大家多多支持我们的博客。更多前端技术分享，敬请期待。