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>

 

Logo

前往低代码交流专区

更多推荐