Vue implémente le saut local

Avec l'application généralisée de Vue, nous devons souvent implémenter des fonctions de saut locales dans des applications monopage. Ce type de saut fait principalement référence au saut de lien dans la page, comme la réalisation d'une fonction de « retour en haut » ou la réalisation de la fonction de commutation de différents contenus dans une application d'une seule page.

Après quelques recherches, j'ai trouvé deux méthodes de mise en œuvre plus efficaces, à savoir l'utilisation de points d'ancrage et la programmation.

Utiliser des points d'ancrage

Le point d'ancrage est une syntaxe HTML qui permet de sauter dans la même page. Le principe d'implémentation consiste à ajouter un attribut id à l'élément spécifié dans la page, puis à accéder à l'élément dans la page en ajoutant un point d'ancrage au lien.

Implémenter le saut de point d'ancrage dans Vue est également très simple. Nous devons d'abord ajouter un identifiant unique à l'élément qui doit être sauté, par exemple :

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

Ensuite, nous pouvons sauter en ajoutant le point d'ancrage correspondant au lien sur la page :

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

Le code pour implémenter le saut d'ancre dans Vue est le suivant :

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

Parmi eux, $router est l'objet de routage fourni dans Vue-Router, path : '/' signifie accéder à la page actuelle, et hash : '#example' signifie accéder à l'identifiant de l'élément spécifié. $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

Implémenté par programme

En plus d'utiliser des points d'ancrage, nous pouvons également implémenter des sauts locaux par programme. Cette méthode de mise en œuvre sera plus flexible dans certains scénarios particuliers.

Vue-Router fournit de nombreuses API pour implémenter la navigation programmatique. Parmi elles, les API les plus couramment utilisées sont la méthode $router.push et la méthode $router.replace. Les deux méthodes peuvent être utilisées pour implémenter des sauts de page, mais leurs méthodes d'implémentation sont légèrement différentes.

La méthode $router.push ajoutera l'URL de la page actuelle à l'historique de routage du navigateur et chargera une nouvelle page en utilisant la nouvelle URL, réalisant ainsi des sauts de page. Le code est le suivant : #🎜🎜#

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

#🎜🎜#La méthode $router.replace n'ajoute pas de nouvel enregistrement à l'historique du navigateur, mais remplace directement l'URL actuelle. Le code est le suivant : #🎜🎜#rrreee#🎜🎜#Si nous voulons implémenter la fonction de saut local, nous pouvons d'abord obtenir les informations de position de l'élément cible qui doit être sauté, puis utiliser $router Méthode .push code> ou <code>$router.replace pour implémenter le saut. #🎜🎜##🎜🎜#Pour donner un exemple pratique, dans une application monopage, on peut implémenter une fonction "retour en haut". Tout d'abord, nous devons obtenir les informations de position de l'élément cible en écrivant une fonction : #🎜🎜#rrreee#🎜🎜# Ensuite, nous pouvons ajouter un bouton "retour en haut" à la page, qui peut être obtenu lorsque l'utilisateur clique sur le bouton Saut local : #🎜🎜#rrreee#🎜🎜#La méthode Vue correspondante est la suivante : #🎜🎜#rrreee#🎜🎜#Dans cette méthode, on obtient d'abord les informations de position de l'élément cible, puis on passe $router La méthode .push implémente le saut. Notez que ceci est différent du saut de point d'ancrage. Dans la méthode $router.push, nous utilisons l'attribut query pour transmettre les informations de position de l'élément cible. #🎜🎜##🎜🎜#Enfin, dans la page cible, nous pouvons obtenir les informations de localisation transmises via $route.query pour faire défiler la page jusqu'à la position spécifiée : #🎜🎜# rrreee#🎜 🎜#De cette façon, nous pouvons implémenter la fonction de saut local dans les applications monopage. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Pour les sauts locaux dans les applications d'une seule page, nous pouvons utiliser des points d'ancrage ou par programme. Parmi elles, la méthode du point d’ancrage est plus simple et plus intuitive, mais peut présenter des limites dans certains scénarios. La méthode de programmation peut contrôler de manière plus flexible le comportement des sauts de page, mais le code d'implémentation correspondant nécessite plus de travail. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!