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)文章
這篇文章主要介紹了基于Vue實現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下2018-04-04
Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例
這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Pinia是一個基于Vue3的狀態(tài)管理庫,本文主要介紹了vue3中pinia的使用及持久化的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
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 v-model的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了vue如何在新窗口打開頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關(guān)于如何利用vue控制元素的顯示與隱藏的相關(guān)資料,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了通過命令行生成vue項目框架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue中使用highlight.js實現(xiàn)代碼高亮顯示以及點擊復(fù)制
本文主要介紹了Vue中使用highlight.js實現(xiàn)代碼高亮顯示以及點擊復(fù)制，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
本文主要介紹了vue中使用詞云圖的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01