简单使用antd vue Anchor锚点
antd的anchor组件在点击锚点后会修改URL,而单页应用中如果使用哈希模式的路由,当URL被修改后,刷新页面会导致当前路由没有定义而出现404的情况。<template><header id="top"></header><article id="cont"></article><a-anchor :affix="false"
·
antd的anchor组件在点击锚点后会修改URL,而单页应用中如果使用哈希模式的路由,当URL被修改后,刷新页面会导致当前路由没有定义而出现404的情况。
<template>
<header id="top">
</header>
<article id="cont">
</article>
<a-anchor :affix="false" @click="handleAnchorClick">
<a-anchor-link href="top" title="测试题信息" />
<a-anchor-link href="cont" title="测试题内容" />
</a-anchor>
</template>
<script>
export default {
methods: {
handleAnchorClick(e,link){
// 阻止点击的默认事件修改路由
e.preventDefault();
var srcolls = document.getElementById(link.href);
srcolls.scrollIntoView({block: 'start', behavior: 'smooth'});
},
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)