單頁面多路由區域操作

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

App.vue 中設置：

<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中設置：

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

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