vue가있는 다중 라우터

Question

뷰를 완전히 바꿀 수있는 PHP 페이지가 필요한 곳에서 PHP를 실행하고 있습니다. 히스토리 모드 API를 활용해야하기 때문에 완전한 라우터가 필요합니다.

뷰 라우터와 같은 것을 할 수있을만큼 쉽다 : 단순히 두보기에과 같이 라우터를로드하고 PHP를 통과 백엔드 데이터를 생성

PHP 내에서

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

:

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

을

이 기능은 한 페이지에서 작동하지만 완전히 다른 일련의 경로를 가진 다른 페이지를 원한다면 어떻게해야합니까? 라우터는 다른 경로 집합을 구분하기 위해 라우터가 어떤 페이지에 있는지 인식해야합니다.

나는 이미 내 데이터로하고있는 것처럼 소품 패스의 URL을 확인해야합니다. 라우터에서 소품 데이터를 읽는 방법을 잘 모르겠습니다.

이 문제를 해결하기위한 좋은 방법은 무엇입니까?

Answer 1

당신은 단순히 두 개의 명명 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, ... } 
    ]