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

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

app.vue 中設(shè)置：

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 單頁(yè)面多路由區(qū)域操作，如有疑問請(qǐng)大家留言，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

希望與廣大網(wǎng)友互動(dòng)？？

點(diǎn)此進(jìn)行留言吧！

總結(jié)

以上是生活随笔為你收集整理的vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。