Vue.js が単一ページ上で複数のルーティング領域をどのように操作するかの分析例

この記事では主に、Vue.js の単一ページの複数のルーティングエリアの操作の詳細な例に関する関連情報を紹介します。必要な場合は、1 ページに複数の

ルーティングエリアの操作

を参照してください。 975b587bf85a482ea10b0a28848e78a4 エリアは、ルート

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 の場合に 2 つのコンポーネントの表示位置を入れ替えることです

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 が単一ページ上で複数のルーティング領域をどのように操作するかの分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。