vueを使用した複数のルータ

Question

PHPアプリケーションを実行しています。ビューを完全に交換するためにはいくつかのページが必要です。ヒストリモードAPIを利用する必要があるため、完全な本格的なルータが必要です。

Vueのルータでこのような何かを行うのに十分に簡単です：

const router = new VueRouter({ 
    routes: [ 
     { path: '/', component: DefaultView }, 
     { path: '/map', component: MapView } 
    ] 
}); 

PHPの中で、私は単純にそうようにルータをロードし、PHPを渡すには、両方のビューにバックエンドデータを生成：

<router-view data="<?= $data ?>"></router-view> 

を

これは1ページで機能しますが、別のページに完全に異なるルートを設定したい場合はどうすればよいですか？ルータは、異なるルートセットを区別するために、そのページがどのページにあるかを認識させる必要があります。

私は既に自分のデータでやっているように、小道具のパスのURLをチェックする必要があります。私はルータから小道具のデータを読む方法を確信しています。

これに対処するにはどうすればよいでしょうか？

Answer 1

あなたは、単に2つの名前付きrouter-views

を作成し、これらのルータ・ビューに異なるデータを渡します。

<router-view class="view one"></router-view> //default 
<router-view class="view two" name="a"></router-view> 
<router-view class="view three" name="b"></router-view> 

routes: [ 
    { 
     path: '/', 
     components: { 
     default: Foo, 
     a: Bar, 
     b: Baz 
     } 
    }, 
    { 
     path: '/map', 
     components: { 
     default: Foo2, 
     a: Bar2, 
     b: Baz2 
     } 
    } 
    ] 

またはネストされたルートビューを使用//子供

routes: [ 
     { path: '/page1', component: page1, 
      children: [ 
     { 

      path: 'route1', 
      component: route1 
     }, 
     { 

      path: 'route2', 
      component: route2 
     } 
     ] 

     }, 
     { path: '/page2', component: page2, ... } 
    ]