場景類:vue多個router-view路由巢狀
阿新 • • 發佈:2021-06-12
知識點:路由巢狀
場景:
今天遇到一個需求是這樣的,有一個管理系統的列表頁,點選某一行進入那一行的詳情頁面,於是我想這樣設計路由。主要是在 App.vue 裡套一個 FeedBack ,元件裡面只有 <router-view>來進行路由巢狀,再給這個元件里加子元件就好啦。
效果:
程式碼:
// router.js export default new Router({ mode: 'history', base: '/pfizer-subapp/pc/admin', routes: [ { path: '/feedback', component: Feedback, children: [ { path:'/', redirect: '/feedback/main' }, { path: '/feedback/main', name: 'FedMain', component: FedMain }, { path: '/feedback/detail/:id', name: 'FedDetail', component: FedDetail } ] } ] })
//App.vue <template> <div> <div class="left"> 左邊側導航 </div> <div class="right"> <router-view /> </div> </div> </template>
// feedback.vue <template> <div id="feedback"> <router-view></router-view> </div> </template>
// fed-main.vue <template> <div id="fed-main"> 表格程式碼 </div> </template>
// fed-detail.vue <template> <div id="fed-detail"> 詳情程式碼 </div> </template>
轉:https://blog.csdn.net/weixin_43972437/article/details/100810427