实现页面锚点滚动的方式有很多，但是 vue 如何实现呢？在 vue 中，我们可以采用 vue router 来实现锚点的滚动。下面，我将通过代码演示来展示如何在 vue 中实现锚点滚动。
步骤一：安装 vue router
在使用 vue router 之前，需要先安装它。我们可以通过以下命令来安装 vue router：
npm install vue-router
或
yarn add vue-router
步骤二：配置 vue router
在安装 vue router 后，需要在代码中配置 vue router。在 vue 中，我们需要在 main.js 文件中，引入并使用 vue router，如下：
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')
在上述代码中，我们定义了三个路由，分别是 '/'、'/about'、'/contact'。其中，每个路由都对应一个组件：home、about、contact。
步骤三：定义页面锚点
在 vue 中，定义页面锚点需要在 html 的元素上，添加 id 属性，如下所示：
<div id="section1">section 1</div><div id="section2">section 2</div><div id="section3">section 3</div>
步骤四：定义锚点跳转链接
在 vue 中，我们可以通过 <router-link> 组件来生成链接。我们需要定义一个 <router-link> 组件，来实现页面锚点的跳转，如下：
<router-link to="#section1">section 1</router-link><router-link to="#section2">section 2</router-link><router-link to="#section3">section 3</router-link>
在上述代码中，我们使用了 to 属性来定义链接地址，它的值为锚点 id。
步骤五：实现锚点滚动
在 vue 中，我们可以通过钩子函数来实现锚点滚动。我们需要在每个路由跳转完成后，滚动到锚点位置。钩子函数可以在 vue 的路由中定义，具体代码如下：
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 } } }})
在上述代码中，我们通过 scrollbehavior 定义了滚动操作。当路由对象中有 hash 属性时，即路由跳转到指定的锚点时，才会进行滚动操作，否则不进行滚动操作。
结语
到这里，我们就完成了在 vue 中实现页面锚点滚动的代码。通过 vue router 的强大功能，我们可以很方便地实现锚点滚动，以提高用户体验。如果你有其他的实现方式，欢迎分享给大家。
以上就是vue 实现锚点滚动的详细内容。