快捷導(dǎo)航

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

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

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

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

在一個(gè)頁面中有兩個(gè)及以上的<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è)置是當(dāng)url為/#/first 時(shí)，交換兩個(gè)組件顯示的位置

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+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟
最近學(xué)習(xí)在vite項(xiàng)目中配置less,本文主要介紹了Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-02-02
VUE?v-for中的:key詳解
這篇文章主要為大家介紹了v-for中的:key，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vite+vue3使用@路徑報(bào)錯(cuò)處理
本文主要介紹了vite+vue3使用@路徑報(bào)錯(cuò)處理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
vue 微信掃碼登錄(自定義樣式)
這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
vue 封裝自定義組件之tabal列表編輯單元格組件實(shí)例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實(shí)例代碼,需要的朋友可以參考下
2017-09-09
Vue3中使用Element?Plus時(shí)el-icon無法顯示的問題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時(shí)el-icon無法顯示的問題解決,需要的朋友可以參考下
2022-03-03
Vue中對數(shù)組和對象進(jìn)行遍歷和修改方式
這篇文章主要介紹了Vue中對數(shù)組和對象進(jìn)行遍歷和修改方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
JavaScript獲取echart曲線上任意點(diǎn)位的值詳解
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點(diǎn)位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表，點(diǎn)擊視頻列表播放對應(yīng)視頻；同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能，感興趣的朋友一起看看吧
2022-12-12
vue請求接口并且攜帶token的實(shí)現(xiàn)
本文主要介紹了vue請求接口并且攜帶token的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07