Vue는 로컬 점프를 구현합니다.

Vue가 널리 적용되면서 단일 페이지 애플리케이션에서 로컬 점프 기능을 구현해야 하는 경우가 많습니다. 이러한 종류의 점프는 주로 "맨 위로 돌아가기" 기능을 구현하거나 단일 페이지 애플리케이션에서 다른 콘텐츠를 전환하는 기능을 구현하는 등 페이지 내 링크 점프를 나타냅니다.

몇 가지 조사 끝에 앵커 포인트를 사용하고 프로그래밍 방식으로 구현하는 두 가지 더 효과적인 구현 방법을 찾았습니다.

앵커 사용

앵커는 동일한 페이지 내에서 이동할 수 있는 HTML 구문입니다. 구현 원칙은 페이지의 지정된 요소에 id 속성을 추가한 다음 링크에 앵커 포인트를 추가하여 페이지 내의 요소로 이동하는 것입니다.

Vue에서 앵커 포인트 점프를 구현하는 것도 매우 간단합니다. 먼저 점프해야 하는 요소에 고유 ID를 추가해야 합니다. 예:

<div id="example">这里是文本内容</div>

그런 다음 페이지의 링크에 해당 앵커 포인트를 추가하여 점프할 수 있습니다.

<a href="#example">跳转到示例</a>

Vue에서 앵커 포인트 점프 구현 전송된 코드는 다음과 같습니다.

this.$router.push({ path: '/', hash: '#example' })

그 중 $router는 Vue-Router에서 제공하는 라우팅 객체이고, path: '/'는 현재 페이지로 점프한다는 의미이며, hash: '#example'은 지정된 요소의 ID로 점프하는 것을 의미합니다. $router 是 Vue-Router 中提供的路由对象，path: '/' 表示跳转到当前页面，而 hash: '#example' 则表示跳转到指定元素的 id。

通过编程方式实现

除了使用锚点之外，我们还可以通过编程的方式来实现局部跳转。这种实现方式在一些特殊场景下会更加灵活。

Vue-Router 提供了许多 API 来实现编程式导航。其中，最常用的 API 是 $router.push 方法和 $router.replace 方法。这两个方法都可以用来实现页面跳转，但其实现方式略有不同。

$router.push 方法会将当前页面的 URL 添加到浏览器的路由历史中，并使用新的 URL 加载新页面，从而实现页面跳转。其代码如下：

this.$router.push('/path/to/destination')

而 $router.replace 方法则不会向浏览器历史中添加新的记录，而是直接替换当前的 URL。其代码如下：

this.$router.replace('/path/to/destination')

如果我们要实现局部跳转的功能，我们可以先获取到需要跳转的目标元素的位置信息，然后再使用 $router.push 或者 $router.replace 方法实现跳转。

举一个实际的例子，在一个单页应用中，我们可以实现一个“返回顶部”的功能。首先，我们需要通过编写一个函数来获得目标元素的位置信息：

function getTargetPosition() {
  const target = document.querySelector('#target')
  if (!target) return null
  const targetRect = target.getBoundingClientRect()
  return {
    x: targetRect.left + window.pageXOffset,
    y: targetRect.top + window.pageYOffset
  }
}

然后，我们可以在页面中添加一个“返回顶部”的按钮，当用户点击按钮时，即可实现局部跳转：

<button @click="backToTop">返回顶部</button>

对应的 Vue 方法如下：

methods: {
  backToTop() {
    const position = getTargetPosition()
    if (!position) return
    this.$router.push({ path: '/', query: { position } })
  }
}

在这个方法中，我们先获取目标元素的位置信息，然后再通过 $router.push 方法实现跳转。注意到，这里不同于锚点跳转，在 $router.push 方法中，我们使用了 query 属性来传递目标元素的位置信息。

最后，在目标页面中，我们可以通过 $route.query

프로그래밍 방식으로 달성

앵커 포인트를 사용하는 것 외에도 프로그래밍 방식으로 로컬 점프를 구현할 수도 있습니다. 이 구현 방법은 일부 특수 시나리오에서 더 유연합니다.

Vue-Router는 프로그래밍 방식 탐색을 구현하기 위한 많은 API를 제공합니다. 그 중 가장 일반적으로 사용되는 API는 $router.push 메소드와 $router.replace 메소드입니다. 두 방법 모두 페이지 점프를 구현하는 데 사용할 수 있지만 구현 방법은 약간 다릅니다.

$router.push 메소드는 현재 페이지의 URL을 브라우저의 라우팅 기록에 추가하고 새 URL을 사용하여 새 페이지를 로드함으로써 페이지 점프를 달성합니다. 코드는 다음과 같습니다. 🎜

mounted() {
  const { position } = this.$route.query
  if (position) {
    window.scrollTo(position.x, position.y)
  }
}

🎜 $router.replace 메소드는 브라우저 기록에 새 레코드를 추가하지 않고 현재 URL을 직접 대체합니다. 코드는 다음과 같습니다. 🎜rrreee🎜로컬 점프 기능을 구현하려면 먼저 점프해야 하는 대상 요소의 위치 정보를 얻은 후 $router.push를 사용하면 됩니다. 또는 $router.replace 메소드가 점프를 구현합니다. 🎜🎜실용적인 예를 들자면 단일 페이지 애플리케이션에서 "맨 위로 돌아가기" 기능을 구현할 수 있습니다. 먼저 함수를 작성하여 대상 요소의 위치 정보를 가져와야 합니다. 🎜rrreee🎜 그런 다음 사용자가 버튼을 클릭하면 페이지에 "맨 위로 돌아가기" 버튼을 추가할 수 있습니다. : 🎜rrreee 🎜해당 Vue 메소드는 다음과 같습니다. 🎜rrreee🎜 이 메소드에서는 먼저 대상 요소의 위치 정보를 얻은 후 $router.push 메소드를 통해 점프를 구현합니다. 이는 앵커 포인트 점프와는 다릅니다. $router.push 메서드에서는 query 속성을 ​​사용하여 대상 요소의 위치 정보를 전달합니다. 🎜🎜마지막으로 대상 페이지에서 $route.query를 통해 전달된 위치 정보를 가져와 지정된 위치로 페이지를 스크롤할 수 있습니다. 🎜rrreee🎜이런 방식으로 로컬 점프 기능을 구현할 수 있습니다. 단일 페이지 응용 프로그램에서. 🎜🎜요약🎜🎜단일 페이지 애플리케이션에서 로컬 점프의 경우 앵커 포인트를 사용하거나 프로그래밍 방식으로 이를 달성할 수 있습니다. 그중 앵커 포인트 방법은 더 간단하고 직관적이지만 일부 시나리오에서는 제한이 있을 수 있습니다. 프로그래밍 방법은 페이지 이동 동작을 보다 유연하게 제어할 수 있지만 해당 구현 코드에는 더 많은 작업이 필요합니다. 🎜

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