Maison > Article > interface Web > 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 b988a8fd72e5e0e42afffd18f951b277
组件来生成链接。我们需要定义一个 b988a8fd72e5e0e42afffd18f951b277
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!