使用Vue+Element搭建項目的時候，為了避免一個頁面過大，將tab里面的內容分成多個頁面，并使用同級視圖展示
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用戶詳情" name="first"> <router-view></router-view> </el-tab-pane> <el-tab-pane label="用戶組" name="second"> <router-view name="second"></router-view> </el-tab-pane> <el-tab-pane label="用戶權限" name="third"> <router-view name="third"></router-view> </el-tab-pane> <el-tab-pane label="用戶信息" name="fourth"> <router-view name="fourth"></router-view> </el-tab-pane> <el-tab-pane label="部門信息" name="fifth"> <router-view name="fifth"></router-view> </el-tab-pane> </el-tabs>
分別給router-view定義一個name，默認顯示的可以不用定義
然后在路由中定義 components ,
path: '/admin/userManagement/userNew/userShow',components: { default: AdminUserShow, second: AdminUserGroup}默認顯示的name在components中定義為default
詳情可以查看官方文檔
以上這篇vue實現同一個頁面可以有多個router-view的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
