使用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的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。