vue implémente le défilement des ancres

Avant-propos

Il existe de nombreuses façons d'implémenter le défilement d'ancre de page, mais comment l'implémenter dans Vue ? Dans Vue, nous pouvons utiliser Vue Router pour implémenter le défilement d'ancre. Ci-dessous, je vais vous montrer comment implémenter le défilement d'ancre dans Vue à travers une démonstration de code.

Étape 1 : Installer Vue Router

Avant d'utiliser Vue Router, vous devez d'abord l'installer. Nous pouvons installer Vue Router via la commande suivante :

npm install vue-router

ou

yarn add vue-router

Étape 2 : Configurer Vue Router

Après avoir installé Vue Router, vous devez configurer Vue Router dans le code. Dans Vue, nous devons introduire et utiliser Vue Router dans le fichier main.js, comme suit :

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Dans le code ci-dessus, nous définissons trois routes, à savoir '/', '/about', '/contact '. Parmi eux, chaque parcours correspond à un composant : Accueil, A propos, Contact.

Étape 3 : Définir l'ancre de la page

Dans Vue, pour définir l'ancre de la page, vous devez ajouter l'attribut id à l'élément HTML, comme indiqué ci-dessous :

<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

Étape 4 : Définir le lien de saut d'ancre

Dans Vue , nous pouvons utiliser le composant <router-link> 组件来生成链接。我们需要定义一个 <router-link> pour réaliser un saut d'ancre de page, comme suit :

<router-link to="#section1">Section 1</router-link>
<router-link to="#section2">Section 2</router-link>
<router-link to="#section3">Section 3</router-link>

Dans le code ci-dessus, nous utilisons l'attribut to pour définir l'adresse du lien, et sa valeur est l'identifiant de l'ancre.

Étape 5 : Implémenter le défilement d'ancre

Dans Vue, nous pouvons implémenter le défilement d'ancre via les fonctions de hook. Nous devons faire défiler jusqu'au point d'ancrage une fois chaque saut d'itinéraire terminé. La fonction hook peut être définie dans le routage de Vue. Le code spécifique est le suivant :

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 定义滚动操作,这里的to和from都是路由信息对象
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      // 滚动到指定的锚点
      return { selector: to.hash }
    } else {
      // 没有指定锚点则返回屏幕最上方
      return { x: 0, y: 0 }
    }
  }
})

Dans le code ci-dessus, nous définissons l'opération de défilement via scrollBehavior. Lorsqu'il y a un attribut de hachage dans l'objet de routage, c'est-à-dire lorsque le routage passe au point d'ancrage spécifié, l'opération de défilement sera effectuée. Sinon, l'opération de défilement ne sera pas effectuée.

Conclusion

À ce stade, nous avons terminé le code pour implémenter le défilement d'ancre de page dans Vue. Grâce aux fonctions puissantes de Vue Router, nous pouvons facilement implémenter le défilement d'ancre pour améliorer l'expérience utilisateur. Si vous disposez d’autres méthodes de mise en œuvre, partagez-les avec tout le monde.

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!