bosslandy

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

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模式,可以直接使用“/”从项目根目录引入静态文件。

相关文章: