vue implements anchor scrolling

Preface

There are many ways to implement page anchor scrolling, but how does Vue implement it? In Vue, we can use Vue Router to implement anchor scrolling. Below, I will show you how to implement anchor scrolling in Vue through a code demonstration.

Step 1: Install Vue Router

Before using Vue Router, you need to install it first. We can install Vue Router through the following command:

npm install vue-router

or

yarn add vue-router

Step 2: Configure Vue Router

After installing Vue Router, you need to configure Vue Router in the code . In Vue, we need to introduce and use Vue Router in the main.js file, as follows:

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')

In the above code, we define three routes, namely '/' and '/about' ,'/contact'. Among them, each route corresponds to a component: Home, About, Contact.

Step 3: Define the page anchor point

In Vue, defining the page anchor point requires adding the id attribute to the HTML element, as shown below:

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

Steps Four: Define anchor jump links

In Vue, we can generate links through the<router-link></router-link> component. We need to define a <router-link></router-link> component to realize the page anchor jump, as follows:

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

In the above code, we use the to attribute to define the link address , its value is the anchor id.

Step 5: Implement anchor scrolling

In Vue, we can implement anchor scrolling through hook functions. We need to scroll to the anchor point after each route jump is completed. The hook function can be defined in Vue's routing. The specific code is as follows:

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 }
    }
  }
})

In the above code, we define the scrolling operation through scrollBehavior. When there is a hash attribute in the routing object, that is, when the routing jumps to the specified anchor point, the scrolling operation will be performed. Otherwise, the scrolling operation will not be performed.

Conclusion

At this point, we have completed the code to implement page anchor scrolling in Vue. Through the powerful functions of Vue Router, we can easily implement anchor scrolling to improve user experience. If you have other implementation methods, please share them with everyone.

The above is the detailed content of vue implements anchor scrolling. For more information, please follow other related articles on the PHP Chinese website!