vue實現(xiàn)同一個頁面可以有多個router-view的方法
更新時間：2018年09月20日 15:04:53 作者：蠟筆小心丶
今天小編就為大家分享一篇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)文章
這篇文章主要為大家詳細(xì)介紹了vue2實現(xiàn)手勢密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了在Vue 中獲取下拉框的文本及選項值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文將詳細(xì)介紹jQuery代碼優(yōu)化的9種方法,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue如何使用rem適配，幫助大家處理vue開發(fā)移動應(yīng)用時的兼容性問題，感興趣的朋友可以了解下2021-02-02
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-03
vue實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法
這篇文章主要介紹了vue中如何實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
很多時候我們在操作過頁面時候，特別是增刪改操作之后，數(shù)據(jù)會有所改變，本文主要介紹了Vue實現(xiàn)父子組件頁面刷新的幾種常用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了vue框架render方法如何替換template，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+Java后端進(jìn)行調(diào)試時解決跨域問題的方式
今天在開發(fā)中遇到有點小問題，vue+Java后端進(jìn)行調(diào)試時如何解決跨域問題，下面小編給大家分享解決方法，感興趣的朋友一起看看吧2017-10-10