vue實現(xiàn)同一個頁面可以有多個router-view的方法
使用Vue+Element搭建項目的時候,為了避免一個頁面過大,將tab里面的內(nèi)容分成多個頁面,并使用同級視圖展示
<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="用戶權(quán)限" 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,默認(rèn)顯示的可以不用定義
然后在路由中定義 components ,
path: '/admin/userManagement/userNew/userShow', components: { default: AdminUserShow, second: AdminUserGroup }
默認(rèn)顯示的name在components中定義為default
詳情可以查看官方文檔
以上這篇vue實現(xiàn)同一個頁面可以有多個router-view的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序小結(jié)
這篇文章主要介紹了vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序,本文給大家介紹了安裝electron有兩種方式,兩種方式創(chuàng)建的項目結(jié)構(gòu)大不相同,需要的朋友可以參考下2024-03-03vue實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法
這篇文章主要介紹了vue中如何實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法,本文給大家介紹的非常詳細(xì),具有參考借鑒價值,需要的朋友可以參考下2017-12-12ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vue+Java后端進(jìn)行調(diào)試時解決跨域問題的方式
今天在開發(fā)中遇到有點小問題,vue+Java后端進(jìn)行調(diào)試時如何解決跨域問題,下面小編給大家分享解決方法,感興趣的朋友一起看看吧2017-10-10