vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题，具体内容如下

一. 异常描述

本来使用的是vue-router的hash模式，但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉），所以就需要使用history模式，然后就让后端改下nginx配置：

location / { try_files $uri $uri/ /index.html; }

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

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.html文件中直接引用的，也就是在根路径下引入的。之前的hash模式下,根路径是不会变的，所以我们在index.html文件中直接引入这些静态文件，是可行的，但是使用history模式后，根路径就不固定了。那么这种引入方式就不可行了，所以才造成了上边出现的页面

无法渲染的问题：

三. 解决问题

这里有点尴尬，先考虑的主Vue中以Import的方式引入静态样式文件，的确可行，但是最后发现，直接修改index.html文件中的静态文件引入路径就OK了：

修改前：

修改后

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。