Vue 라우팅에 뛰어드는 여러 가지 방법

Vue.js에서 라우팅은 매우 중요한 개념입니다. 이를 통해 다양한 URL 주소를 기반으로 다양한 콘텐츠를 표시할 수 있습니다. Vue.js에서는 라우팅 주소를 통해 다양한 구성 요소나 페이지에 액세스할 수 있습니다. 이 기사에서는 Vue.js에서 점프를 라우팅하는 여러 가지 방법을 소개합니다.

1. 라우터 링크 구성 요소를 사용하여 라우팅 점프 구현

router-link는 Vue.js에 내장된 라우팅 점프 구성 요소입니다. 다양한 링크에 액세스할 수 있는 태그를 제공하고 URL 주소를 라우터 보기 구성 요소에 전달하여 해당 페이지를 표시합니다. 템플릿의 라우터 링크 구성 요소를 사용하여 페이지 간에 이동할 수 있습니다.

다음은 라우터 링크 구성 요소를 사용하여 다른 페이지로 이동하는 샘플 코드입니다.

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

위 코드에서는 두 개의 라우터 링크 구성 요소를 사용합니다. to 속성은 점프의 라우팅 주소를 지정하는 데 사용됩니다. 예를 들어 to="/about"은 About Us 페이지로 점프한다는 의미입니다. 태그를 클릭하면 Vue.js는 라우팅 주소를 일치시키고 to 속성 값을 기반으로 해당 구성 요소를 표시합니다.

2. Vue.js에서 프로그래밍 방식 탐색을 사용하여 경로 점프 구현

경로 점프를 위한 라우터 링크 구성 요소를 사용하는 것 외에도 Vue.js는 경로 점프를 위한 프로그래밍 방식 탐색 방법도 제공합니다. 프로그래밍 방식 탐색은 JavaScript 코드를 통해 라우팅 점프를 구현하므로 코드의 지정된 페이지로 직접 이동할 수 있습니다.

다음은 Vue.js에서 프로그래밍 방식 탐색을 사용하여 경로 점프를 구현하는 샘플 코드입니다.

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

위 코드에서는 두 개의 버튼을 사용하여 경로 점프를 구현합니다. 버튼을 클릭하면 goHome 또는 goAbout 메소드를 호출하여 경로 점프를 구현합니다. Vue.js에서는 this.$router를 통해 라우팅 개체에 액세스하고 push() 메서드를 호출하여 경로 점프를 구현할 수 있습니다. push() 메소드를 호출하고 대상 라우팅 주소를 전달하면 Vue.js는 자동으로 라우팅 주소를 일치시키고 해당 구성 요소를 표시합니다.

3. router.push() 메소드를 사용하여 경로 점프 구현

$this.$router.push() 메소드를 사용하여 경로 점프를 구현하는 것 외에도 Vue.js는 router.push() 메소드도 제공합니다. 라우팅 점프를 수행하는 방법. $this.$router.push() 메소드와 비교할 때, router.push() 메소드는 더 직접적이며 라우팅 점프 동작을 더 세밀하게 제어할 수 있습니다.

다음은 router.push() 메소드를 사용하여 경로 점프를 구현하는 샘플 코드입니다.

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
import { Router } from 'vue-router';

export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      const route = { path: '/about', name: 'About' };
      this.$router.push(route);
    }
  }
}
</script>

위 코드에서는 router.push() 메소드를 사용하여 점프를 구현합니다. 대상 라우팅 주소를 지정하기 위해 문자열이나 객체를 전달할 수 있습니다. 위의 예에서는 페이지의 라우팅 주소와 이름을 지정하는 개체를 전달했습니다.

요약

Vue.js에서 라우팅은 매우 중요한 개념입니다. 실제 개발에서는 실제 상황에 따라 적절한 경로 점프 방법을 선택해야 합니다. 라우터 링크 구성 요소와 프로그래밍 방식 탐색은 모두 일반적으로 사용되는 라우팅 점프 방법으로 대부분의 개발 요구 사항을 충족할 수 있습니다. 라우팅 점프 동작을 보다 정확하게 제어해야 하는 경우 router.push() 메서드를 사용하여 라우팅 점프를 구현할 수 있습니다.

위 내용은 Vue 라우팅에 뛰어드는 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!