原文关注公众号，后台里留言可进行提问，可在后台留言向作者提问解答问题!
方法1：在路由守卫中处理路由滚动
npm install vue-router- 然后，在你的项目中配置 Vue Router。例如，在 src/router/index.js 文件中
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;3.创建目标组件并添加目标元素
假设我们想在 About.vue 组件中滚动到某个特定的位置。我们可以在 About.vue 中添加一个具有唯一 id属性的元素
<template>
<div>
<h1>About Page</h1>
<!-- 为了演示滚动效果，添加高度 -->
<div style="height: 1000px;">
Scroll down to see the target element.
</div>
<!-- 滚动到目标位置 -->
<div id="targetElement">
This is the target element.
</div>
</div>
</template>
<script>
export default {
name: 'About',
mounted() {
// 这里可以添加一些组件挂载后的逻辑，但滚动通常是在路由导航守卫中处理
}
};
</script>
<style scoped>
/* 添加一些样式以改善视觉效果 */
</style>4.在路由导航守卫中处理滚动
为了实现滚动到指定位置，我们需要在路由导航守卫中处理滚动逻辑。可以在 src/router/index.js 中添加滚动行为：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About,
// 可以在路由配置中添加 meta 字段来存储滚动信息
meta: {
scrollToTarget: true // 标记该路由需要滚动到目标位置
}
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
scrollBehavior(to, from, savedPosition) {
if (to.meta.scrollToTarget) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 获取目标元素
const targetElement = document.querySelector('#targetElement');
if (targetElement) {
// 滚动到目标位置
targetElement.scrollIntoView({ behavior: 'smooth' });
}
resolve();
}, 0); // 使用 setTimeout 确保 DOM 更新完成
});
} else {
// 如果没有特定要求，则恢复之前的位置或滚动到顶部
return savedPosition || { x: 0, y: 0 };
}
}
});
export default router;5.触发路由导航
最后，在你的 Home.vue 或其他组件中触发路由导航：
<template>
<div>
<h1>Home Page</h1>
<button @click="goToAbout">Go to About Page</button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
goToAbout() {
this.$router.push({ name: 'About' });
}
}
};
</script>方法2： 在页面中处理滚动至指定位置
-
创建 home.vue , about.vue 页面
-
在home.vue跳转到about.vue页面
this.$router.push({
path: "/about"
});- 跳转到about页面后，在about页面获取指定元素距离顶部的距离
<template>
<div>
<!-- 为了演示滚动效果，添加高度 -->
<div style='height:1000px'>div1</div>
<div id='div2' class='id2'>div2</div>
</div>
</template>
<script>
export default {
name: "about",
mounted() {
this.setScrolltop();
},
methods: {
setScrolltop(){
let time=setTimeout(()=>{
this.$nextTick(()=>{
let top=0;
let targetElement=document.getElementById("id2");
if(targetElement){
// 获取元素距离顶部的距离
top=targetElement.offsetTop;
}
if(top>0){
// 滚动到指定位置
window.scrollTo({
top: top,
behavior: 'smooth'
});
}
clearTimeout(time);
time=null;
})
},1000);
}
}
}
</script>