單頁(yè)面多路由區(qū)域操作
在一個(gè)頁(yè)面中有兩個(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 單頁(yè)面多路由區(qū)域操作，如有疑問請(qǐng)大家留言，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
