二级路由配置：

1.新建一个二级路由 导入到router/index.js 并配置

import Vue from 'vue'
import Router from 'vue-router'
import goodinfo from '../components/goodinfo' //盛放子路由的页面
import detail from '../components/children/detail'//子路由
export default new Router({
  routes: [
    {path:'/goodinfo',name:'goodinfo',component:goodinfo,children:[
        {path:'/detail',component:detail}
      ]
    },
  ]
})

2.在盛放子路由的页面加入router-link 与 router-view标签

<router-link to="/detail"><button type="button" class="btn btn-link">Details</button></router-link>
<div class="tabBox">
    <router-view></router-view>
</div>

3.点击带有router-link标签的按钮即可展示子路由

image.png

但是重新进入页面的时候这个子路由是不会自动展示的

该怎么解决？

"redirect"

import Vue from 'vue'
import Router from 'vue-router'
import goodinfo from '../components/goodinfo'
import detail from '../components/goodinfodetails/detail'

Vue.use(Router)

export default new Router({
  routes: [
    {path:'/goodinfo',name:'goodinfo',component:goodinfo,children:[
        {path:'/detail',component:detail},
        {path:'/review',component:review}
      ],redirect:'/detail'//在children的后面加一个redirect：'/想要默认展示的子路由名字'
    },
  ]
})

这样就大功告成了！页面每次刷新都会默认展示redirect设置后的子路由