在Vue 3中，如果你想要在页面跳转后使用锚点定位，你可以通过编程式导航结合router-link来实现。这里是一个简单的例子：
- 首先，确保你的Vue Router配置了正确的路由。
// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
// 其他路由...
],
});
export default router;- 在你的组件中，使用
router-link来定义锚点，并通过编程式导航跳转到指定锚点。
<template>
<div>
<!-- 使用 router-link 定义锚点 -->
<router-link to="/about#team">About Team</router-link>
<!-- 使用按钮触发页面跳转 -->
<button @click="goToAboutTeam">Go to About Team</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
// 编程式导航函数
function goToAboutTeam() {
// 使用编程式导航跳转到 /about 页面并定位到 team 锚点
router.push({ path: '/about', hash: '#team' });
}
</script>在上面的例子中，我们定义了一个router-link指向/about页面的#team锚点，同时我们还创建了一个按钮，当点击按钮时，会调用goToAboutTeam函数，该函数使用router.push方法来实现页面跳转，并定位到指定的锚点。