vue-router动态路由 刷新页面 静态资源没有加载的原因

在做项目的时候，发现刷新页面的时候，静态路由没有加载，度娘了一圈，终于解决了。

vue-router使用history模式+使用嵌套路由：

访问路由和嵌套路由页面，显示正常，但是刷新页面的时候，嵌套路由页面就出异常了：

官方文档对嵌套路由的说明——https://router.vuejs.org/zh-cn/essentials/nested-routes.html

我最初做的时候是在index.html中引入的静态文件

之前的hash模式下,根路径是不会变的，所以我们在index.html文件中直接引入这些静态文件，是可行的，但是使用history模式后，根路径就不固定了。

修改前

<script src="./static/rem.js"></script>

修改后

<script src="/static/rem.js"></script>

 

原理：

./ 是指用户所在的当前目录（相对路径）；

/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；

对于hash模式，根路径是固定的，就是项目的根目录，但是history模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下。

总结，无论hash模式还是history模式，可以直接使用“/”从项目根目录引入静态文件。

转载于:https://www.cnblogs.com/bosslandy/p/8820939.html