vue 请求嵌套_Vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法_奔赴_前端开发者...

解决路由(子

一. 异常描述

本来使用的是

location / { try_files $uri $uri/ /index.

const router = new Router({

mode: 'history',

routes: [

{

path: '/',

component: mall,

name: 'mall'

},

……

//我的银行卡

{

path: '/myCard',

meta: { requireAuth: true },

component: myCard,

name: 'myCard',

children:[

{ path:'', component: card},

{ path:'add', component: add}

]

}

……

]

})

访问

页面样式全乱了，看下页面请求加载的静态文件,所有静态文件都是404；

二. 异常解析

1. 看下官方文档对嵌套

2. 再看之前的异常页面，看来我们的父路由成了根目录了看下文件路径了：

3. 看下我们引入这些异常文件，是在index.

三. 解决问题

这里有点尴尬，先考虑的主

修改前：

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

/ 是指根目录(绝对路径，项目根目录)，也就是项目根目录；

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

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

PS：之前一段时间就遇到过这个问题，百度了好久，发现很少有人问这个问题，有一个也没人回答。也问了好些前端大神，还是没能解决这个问题。也许是平时写惯了“./” 和“../”这些开头的路径了吧，并没有注意到静态文件引入方式的问题，折腾了好些方法，最后很尴尬的发现，其实问题很简单，只是对框架的底层了解不透彻罢了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。