vue怎么嵌套多级路由页面打不开_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}

]

}

……

]

})

访问路由和嵌套路由