Vue踩坑之二级路由下静态资源加载失败

在使用vue开发过程中意外发现 , 当我的路由加到二级时我的页面背景突然没了? 这是怎么回事呢?

让我们先来复现一下问题吧

起初我的登陆页面的路由是这样子的
Vue踩坑之二级路由下静态资源加载失败_第1张图片
我的背景图片是在外部的一个css中写着的
Vue踩坑之二级路由下静态资源加载失败_第2张图片

这个外部css文件我是在index.html中全局引入的 , 按理来说 , 在全局引入了css , 那么我的所有组件 , 所有路由都应该可以访问到我自己写的这个css的内容的 , 也就是说我不管写什么路径都应该可以看到自己的背景图片的

给大家先看下我的index.html文件中是怎么引入的这个外部css

Vue踩坑之二级路由下静态资源加载失败_第3张图片
这里的路径大家需要注意一下 , 问题就出现在这里 , 这里引入时候我采用的是相对路径

就这样 , 我访问的时候 , 我的页面时不存在问题的 , 背景图片也全部可以加载出来

注意
这时候我觉得login是我的管理员登陆界面 , 我想给他加一个admin路由下一级别再放login路由

Vue踩坑之二级路由下静态资源加载失败_第4张图片
这时候访问我的路径时 , 发现网页的背景图片没了

Vue踩坑之二级路由下静态资源加载失败_第5张图片
这可怎么办呢?

解决方式

我将index中引入的外部css进行了一些修改 , 将相对路径改为从根路径开始加载 , 这样就好了 , 所有的页面css样式 , 背景图片都生效了

Vue踩坑之二级路由下静态资源加载失败_第6张图片
我不知道为什么加载相对路径二级路由就访问不到静态资源了 , 但是解决方式就是从根路径加载

希望大佬们可以帮我解释下 , 为什么二级路径访问不到静态资源

你可能感兴趣的:(问题,前端,vue.js,css,前端)