欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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+Vite項目使用less的實現(xiàn)步驟

    Vue3+Vite項目使用less的實現(xiàn)步驟

    最近學習在vite項目中配置less,本文主要介紹了Vue3+Vite項目使用less的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
    2024-02-02
  • VUE?v-for中的:key詳解

    VUE?v-for中的:key詳解

    這篇文章主要為大家介紹了v-for中的:key，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2021-11-11
  • vite+vue3使用@路徑報錯處理

    vite+vue3使用@路徑報錯處理

    本文主要介紹了vite+vue3使用@路徑報錯處理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-11-11
  • vue 微信掃碼登錄(自定義樣式)

    vue 微信掃碼登錄(自定義樣式)

    這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • vue 封裝自定義組件之tabal列表編輯單元格組件實例代碼

    vue 封裝自定義組件之tabal列表編輯單元格組件實例代碼

    這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實例代碼,需要的朋友可以參考下
    2017-09-09
  • Vue3中使用Element?Plus時el-icon無法顯示的問題解決

    Vue3中使用Element?Plus時el-icon無法顯示的問題解決

    我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認圖標,下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時el-icon無法顯示的問題解決,需要的朋友可以參考下
    2022-03-03
  • Vue中對數(shù)組和對象進行遍歷和修改方式

    Vue中對數(shù)組和對象進行遍歷和修改方式

    這篇文章主要介紹了Vue中對數(shù)組和對象進行遍歷和修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • JavaScript獲取echart曲線上任意點位的值詳解

    JavaScript獲取echart曲線上任意點位的值詳解

    這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能

    vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能

    本次需求是做一個視頻列表，點擊視頻列表播放對應(yīng)視頻；同時要求實現(xiàn)斷點分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能，感興趣的朋友一起看看吧
    2022-12-12
  • vue請求接口并且攜帶token的實現(xiàn)

    vue請求接口并且攜帶token的實現(xiàn)

    本文主要介紹了vue請求接口并且攜帶token的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07

最新評論