Vue-Router: Vue 애플리케이션에서 프로그래밍 방식 탐색을 사용하는 방법은 무엇입니까?-View.js-php.cn

Vue-Router: Vue 애플리케이션에서 프로그래밍 방식 탐색을 사용하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-12-18 16:00:29

원래의

599명이 탐색했습니다.

Vue-Router: 如何在Vue应用程序中使用编程式导航？

Vue-Router: Vue 애플리케이션에서 프로그래밍 방식 탐색을 사용하는 방법은 무엇입니까?

Vue-Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리자입니다. 이를 통해 애플리케이션 페이지 간의 라우팅 매핑 관계를 관리하고 단일 페이지 애플리케이션의 효과를 얻을 수 있습니다. Vue-Router에서 탐색은 선언적 탐색과 프로그래밍 탐색의 두 가지 유형으로 나뉩니다.

선언적 탐색은 기본적으로 Vue 구성 요소인 구성 요소를 사용하여 정의됩니다. 탐색 링크를 지정하기 위해 의 to 속성을 사용할 수 있으며 Vue-Router는 자동으로 to 속성을 애플리케이션의 경로에 매핑합니다.

프로그래밍 방식 탐색은 JavaScript 코드를 작성하여 탐색을 구현합니다. 이를 통해 개발자는 코드에서 Vue-Router가 제공하는 API를 직접 호출하여 페이지 탐색을 구현할 수 있습니다. 프로그래밍 방식 탐색은 Vue 애플리케이션의 동적 탐색 또는 애플리케이션의 비즈니스 로직 제어가 필요할 때 보다 유연한 방법을 제공할 수 있습니다.

아래에서는 몇 가지 코드 예제를 사용하여 Vue-Router의 프로그래밍 방식 탐색 구현 방법을 보여줍니다.

지정된 경로로 점프

지정된 경로로 점프하려면 Vue-Router에서 제공하는 $router.push 메소드를 사용할 수 있습니다. 이 메서드는 경로나 명명된 경로를 매개 변수로 받아들이고 지정된 경로나 경로로 이동합니다.

<template>
  <div>
    <button @click="goHome">返回主页</button>
  </div>
</template>

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

로그인 후 복사

위 코드에서는 버튼을 제공하고, 버튼을 클릭하면 goHome 메소드가 호출되어 홈 페이지로의 경로를 탐색합니다.

push 방식과 마찬가지로 Vue-Router에서는 기록 기록을 남기지 않고 현재 URL을 직접 교체할 수 있는 $router.replace 메소드도 제공합니다. 한 페이지에서 다른 페이지로 이동해야 할 때 사용됩니다.

이전 경로로 점프

이전 경로로 점프해야 할 경우 Vue-Router에서 제공하는 $router.back 메소드를 사용할 수 있습니다. 이 메서드는 애플리케이션 기록에서 이전 경로로 이동합니다.

<template>
  <div>
    <button @click="goBack">返回上一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.back()
    }
  }
}
</script>

로그인 후 복사

다음 경로로 점프

이전 경로로 점프하는 것과 마찬가지로 Vue-Router에서 제공하는 $router.forward 메소드를 사용하여 애플리케이션 기록에서 다음 경로로 이동할 수 있습니다.

<template>
  <div>
    <button @click="goForward">前往下一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goForward() {
      this.$router.forward()
    }
  }
}
</script>

로그인 후 복사

Jump to 명명된 경로

Vue-Router에서는 경로의 이름을 설정할 수 있습니다. 명명된 경로로 이동해야 하는 경우 Vue-Router에서 제공하는 $router.push 메서드를 사용하고 이름을 매개변수로 전달할 수 있습니다.

<template>
  <div>
    <button @click="goToAbout">前往关于页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'about' })
    }
  }
}
</script>

로그인 후 복사

위 코드에서는 버튼을 클릭하면 goToAbout 메소드가 호출되어 About 페이지로의 경로가 Vue의 명명된 라우팅 구성을 호출하여 설정됩니다. 라우터.

요약

Vue-Router에서 프로그래밍 방식 탐색은 경로를 관리하는 보다 유연하고 동적인 방법을 제공합니다. $router.push, $router.replace, $router.back 및 $router.forward와 같은 Vue-Router에서 제공하는 API를 사용하여 점프할 수 있습니다. 동시에 탐색을 위해 명명된 경로를 사용할 수도 있습니다. 프로그래밍 방식 탐색을 사용할 때 탐색 작업이 페이지 다시 렌더링을 트리거할 수 있다는 점을 인식하고 탐색 작업에서 예기치 않은 동작이 발생하지 않도록 해야 합니다.

위 내용은 Vue-Router: Vue 애플리케이션에서 프로그래밍 방식 탐색을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!