VUE의 구성 요소 점프를 구현하는 방법

VUE에서 구성 요소 점프를 구현하는 방법은 다음과 같습니다. 라우터 링크 및 구성 요소를 사용하여 하이퍼 링크 점프를 수행하고 대상 경로로 속성을 지정합니다. 구성 요소를 직접 사용하여 현재 라우팅 된 렌더링 된 구성 요소를 표시하십시오. 프로그래밍 방식 탐색을 위해 router.push () 및 router.replace () 메소드를 사용하십시오. 전자는 역사를 구하고 후자는 기록을 떠나지 않고 현재 경로를 대체합니다.

VUE에서 구성 요소 점프를 구현하십시오

VUE에서 구성 요소 점프를 구현하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 router-link 및 <router-view></router-view> 구성 요소를 사용하는 것입니다.

1. router-link 사용하십시오

router-link 구성 요소는 클릭하면 라우팅 점프를 트리거하는 하이퍼 링크입니다. 기본 사용량은 다음과 같습니다.

 <code><router-link :to="'/path/to'">跳转到页面</router-link></code>

여기서 :to 속성은 점프 할 대상 경로를 지정합니다.

2. <router-view></router-view> 사용하십시오

<router-view></router-view> 구성 요소는 현재 라우팅 된 렌더링을 표시하는 특수 구성 요소입니다. 점프에 router-link 사용하면 <router-view></router-view> 해당 구성 요소를 자동으로 렌더링합니다.

3. router.push() 및 router.replace() 사용하십시오.

router.push() 및 router.replace() 메소드는 구성 요소 점프를 구현할 수 있지만 일반적으로 프로그래밍 방식 탐색에 사용됩니다. router.push() 새로운 경로를 히스토리 스택으로 밀고, router.replace() 현재 경로를 교체하고 기록을 남기지 않습니다.

사용의 예

다음은 컴포넌트 점프를 구현하기 위해 router-link 및 <router-view></router-view> 사용하는 예입니다.

 <code>// 路由配置const routes = [ { path: '/about', component: About } ]; const router = new VueRouter({ routes }); // 根组件const App = { template: ` <div> <router-link :to="/about">About</router-link> <router-view></router-view> </div> `, router }; const app = new Vue({ el: '#app', router, components: { App } });</code>

이 예에서 router-link 경로 /about 점프를 트리거하고 <router-view></router-view> 구성 요소 About 정보를 렌더링합니다.

위 내용은 VUE의 구성 요소 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!