vue實現(xiàn)同一個頁面可以有多個router-view的方法
更新時間:2018年09月20日 15:04:53 作者:蠟筆小心丶
今天小編就為大家分享一篇vue實現(xiàn)同一個頁面可以有多個router-view的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
使用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實現(xiàn)同一個頁面可以有多個router-view的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Element-ui?DatePicker日期選擇器基礎用法示例
這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06
vue結合vue-electron創(chuàng)建應用程序小結
這篇文章主要介紹了vue結合vue-electron創(chuàng)建應用程序,本文給大家介紹了安裝electron有兩種方式,兩種方式創(chuàng)建的項目結構大不相同,需要的朋友可以參考下2024-03-03
Vue中使用highlight.js實現(xiàn)代碼高亮顯示以及點擊復制
本文主要介紹了Vue中使用highlight.js實現(xiàn)代碼高亮顯示以及點擊復制,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01

