二級(jí)路由配置:
1.新建一個(gè)二級(jí)路由 導(dǎo)入到router/index.js 并配置
import Vue from 'vue'
import Router from 'vue-router'
import goodinfo from '../components/goodinfo' //盛放子路由的頁(yè)面
import detail from '../components/children/detail'//子路由
export default new Router({
routes: [
{path:'/goodinfo',name:'goodinfo',component:goodinfo,children:[
{path:'/detail',component:detail}
]
},
]
})
2.在盛放子路由的頁(yè)面加入router-link 與 router-view標(biāo)簽
<router-link to="/detail"><button type="button" class="btn btn-link">Details</button></router-link>
<div class="tabBox">
<router-view></router-view>
</div>
3.點(diǎn)擊帶有router-link標(biāo)簽的按鈕即可展示子路由
但是重新進(jìn)入頁(yè)面的時(shí)候這個(gè)子路由是不會(huì)自動(dòng)展示的
該怎么解決垒探?
"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的后面加一個(gè)redirect:'/想要默認(rèn)展示的子路由名字'
},
]
})