页面定义一个绝对定位元素
<div id="abs"></div>
#abs {
position: absolute;
height: 0;
width: 0;
}
页面路由添加一个锚点选参
{
path: "/index/:anchor?",
name: "Index",
meta: {
title: "XXX",
keepAlive: false,
},
component: () => import("@views/Index.vue")
}
// 页面加载后, 计算位置并跳到相应的位置
mounted: function() {
this.$nextTick(() => {
if (this.$route.params.anchor) {
setTimeout(() => {
var anchor = document.querySelector("#abs");
anchor.style.top =
document.querySelector("#" + this.$route.params.anchor).offsetTop -
document.querySelector("#header").offsetHeight -
30 +// 如果有固定头部, 酌情添加高度
"px";
anchor.scrollIntoView();
}, 500);
}
});
}
1 评论