Vue.js 單頁面多路由區(qū)域操作的實例詳解

更新時間：2017年07月17日 11:42:45 投稿：lqh

這篇文章主要介紹了 Vue.js 單頁面多路由區(qū)域操作的實例詳解的相關(guān)資料,需要的朋友可以參考下

單頁面多路由區(qū)域操作

在一個頁面中有兩個及以上的<router-view>區(qū)域，需要通過設(shè)置路由的index.js，來操作這些區(qū)域的內(nèi)容

App.vue 中設(shè)置：

<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中設(shè)置：

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
   }
  }
 ]
})

下面的設(shè)置是當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ū)域操作，如有疑問請大家留言，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue3中頁面跳轉(zhuǎn)方式總結(jié)
Vue.js?是一個用于構(gòu)建用戶界面的漸進式?JavaScript?框架,它提供了多種方法來實現(xiàn)頁面之間的導航,本文將詳細介紹?Vue?3?中的各種頁面跳轉(zhuǎn)方式,有需要的小伙伴可以參考一下
2024-12-12
vue3+echarts實現(xiàn)好看的圓角環(huán)形圖
這篇文章主要介紹了vue3+echarts實現(xiàn)好看的圓角環(huán)形圖效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
使用Vue封裝一個可隨時暫停啟動無需擔心副作用的定時器
這篇文章主要為大家詳細介紹了如何使用Vue封裝一個可隨時暫停啟動無需擔心副作用的定時器,感興趣的小伙伴可以跟隨小編一起學習一下
2024-11-11
詳解vue 自定義marquee無縫滾動組件
這篇文章主要介紹了vue自定義marquee無縫滾動組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue中如何使用jest單元測試
這篇文章主要介紹了vue中如何使用jest單元測試，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue3?setup中父組件通過Ref調(diào)用子組件的方法(實例代碼)
這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
用vue 實現(xiàn)手機觸屏滑動功能
這篇文章主要介紹了用vue 實現(xiàn)手機觸屏滑動的功能，文中通過示例代碼給大家介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
Vue Treeselect樹形下拉框的使用小結(jié)
樹形下拉框是一個帶有下列樹形結(jié)構(gòu)的下拉框,本文主要介紹了Vue Treeselect樹形下拉框的使用小結(jié),具有一定的參考價值,感興趣的可以了解一下
2023-10-10
vue scroller返回頁面記住滾動位置的實例代碼
這篇文章主要介紹了vue scroller返回頁面記住滾動位置的實例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2018-01-01
vue filter的四種用法小結(jié)
這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04