二级路由配置:
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:'/想要默认展示的子路由名字'
},
]
})
网友评论