Vue를 사용하여 홈페이지를 점프하는 방법

vue.js에서는 router.push ( '/') 메소드를 통해 홈페이지로 이동할 수 있습니다. 단계는 다음과 같습니다. VUE 라우팅 라이브러리를 소개하십시오. vue 라우터 인스턴스를 만듭니다. 홈페이지 라우팅 구성; 구성 요소의 홈페이지로 점프하십시오.

Vue는 홈페이지로 점프합니다

vue.js에서는 router.push() 메소드를 통해 홈페이지로 이동할 수 있습니다.

자세한 단계 :

1. VUE 라우팅 소개

vue.js 프로젝트에서 Vue 라우팅 라이브러리가 먼저 필요합니다.

 <code class="js">import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)</code>

2. vue 라우터를 만듭니다

main.js 파일에서 vue 라우터 인스턴스를 만듭니다.

 <code class="js">const router = new VueRouter({ // 路由配置})</code>

3. 홈페이지 라우팅을 구성하십시오

라우팅 구성에서 홈페이지 경로를 지정하십시오.

 <code class="js">router.push({ path: '/', component: Home, })</code>

4. 구성 요소의 홈페이지로 이동하십시오

구성 요소에서는 this.$router.push('/') 사용하여 홈페이지로 점프 할 수 있습니다.

샘플 코드 :

 <code class="js">// 在组件中this.$router.push('/')</code>

5. 알아채다:

프로젝트가 Vuex State Management를 사용하는 경우 Vuex Store에서 currentPage 속성을 정의하고 구성 요소의 route.path 로 설정해야합니다.

이러한 방식으로 사용자가 탐색 표시 줄에서 홈 버튼을 클릭하면 router.push('/') 가 트리거되어 홈페이지로 이동합니다.

위 내용은 Vue를 사용하여 홈페이지를 점프하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!