Vue.js 單頁面多路由區(qū)域操作的實例詳解
更新時間：2017年07月17日 11:42:45 投稿：lqh
這篇文章主要介紹了 Vue.js 單頁面多路由區(qū)域操作的實例詳解的相關資料,需要的朋友可以參考下
單頁面多路由區(qū)域操作
在一個頁面中有兩個及以上的<router-view>區(qū)域，需要通過設置路由的index.js，來操作這些區(qū)域的內容
App.vue 中設置：
<router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></router-view> <router-view name="right" style="float: left;width: 50%; height: 300px;background-color: #898;"></router-view>
index.js中設置：
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import First1 from '@/components/first1'
import First2 from '@/components/first2'
Vue.use(Router)
export default new Router ({
routes : [
{
path : '/',
name : 'Hello',
components : {
default : Hello,
left : First1,
right : First2
}
}
]
})
下面的設置是當url為/#/first 時，交換兩個組件顯示的位置
export default new Router ({
routes : [
{
path : '/',
name : 'Hello',
components : {
default : Hello,
left : First1,
right : First2
}
}, {
path : '/first',
name : 'First',
components : {
default : Hello,
left : First2,
right : First1
}
}
]
})
以上就是 Vue.js 單頁面多路由區(qū)域操作，如有疑問請大家留言，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
最近學習在vite項目中配置less,本文主要介紹了Vue3+Vite項目使用less的實現步驟,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
這篇文章主要為大家介紹了v-for中的:key，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
本文主要介紹了vite+vue3使用@路徑報錯處理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11
這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
vue 封裝自定義組件之tabal列表編輯單元格組件實例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實例代碼,需要的朋友可以參考下2017-09-09
Vue3中使用Element?Plus時el-icon無法顯示的問題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認圖標,下面這篇文章主要給大家介紹了關于Vue3中使用Element?Plus時el-icon無法顯示的問題解決,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue中對數組和對象進行遍歷和修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能
本次需求是做一個視頻列表，點擊視頻列表播放對應視頻；同時要求實現斷點分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能，感興趣的朋友一起看看吧2022-12-12
本文主要介紹了vue請求接口并且攜帶token的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07