vue3跨页面锚点定位/页面跳转后使用锚点定位(vue2类似)
在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
方法来实现页面跳转,并定位到指定的锚点。
评论已关闭