在 Vue.js 中实现锚点定位，可通过使用 Vue Router 的 hash 模式。具体步骤包括：安装 Vue Router在 Vue.js 中添加路由，配置要定位的锚点使用 创建指向锚点的链接设置滚动的行为页面加载时自动定位到锚点
Vue 锚点定位实现
在 Vue.js 中，锚点定位可以通过使用 Vue Router 中的 hash 模式实现。
实现步骤：
1. 安装 Vue Router
立即学习“前端免费学习笔记（深入）”；
npm install vue-router
2. 在 Vue.js 中添加路由
在 Vue 实例中添加路由配置，其中包含要定位的锚点。例如：
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const routes = [
{
path: '/section1',
// 指定锚点为 "my-anchor"
hash: '#my-anchor'
}
]
const router = new VueRouter({
routes
})3. 使用
使用
定位到锚点
4. 设置页面的滚动行为
默认情况下，点击
router.options.scrollBehavior = function () {
return {
selector: '.my-target-element',
behavior: 'smooth'
}
}其中：
-
selector指定要滚动的元素（锚点所在元素）的 CSS 选择器。 -
behavior指定滚动行为，smooth表示平滑滚动。
5. 页面加载时定位到锚点
如果希望在页面加载时自动定位到锚点，可以使用 mounted() 生命周期钩子：
mounted() {
this.$router.push({ hash: '#my-anchor' })
}通过以上步骤，可以在 Vue.js 中实现锚点定位功能，方便用户在页面中快速导航到特定位置。
