antd的anchor组件点击锚点导致路由发生变化

测试的同学反映，antd的anchor组件在点击锚点后会修改URL，而单页应用中如果使用哈希模式的路由，当URL被修改后，刷新页面会导致当前路由没有定义而出现404的情况。

原本的路由是

http://localhost:8066/#/home

由于锚点上有href="#"属性，点击之后URL就变成了这样

http://localhost:8066/#/项目模板

这样的路由刷新之后肯定就会出现404的情况，那么需要怎么解决呢？

看了下antd的文档，发现有个click事件

这个事件的回调函数第一个参数就是事件，那么就通过e.preventDefault()阻止掉默认事件，然后再通过第二个参数拿到点击的href，通过document.getElementById获取到这个元素，然后使用scrollIntoView添加页面滚动效果。

<template>
	<a-anchor class="nav" :getContainer="getContainer" :target-offset="targetOffset" @click="handleClick">
        <a-anchor-link v-for="(item, index) in navList"
                      :href="`#${item}`"
                      :title="item"
                      :key="index"/>
    </a-anchor>
</template>

<script>
export default {
	methods: {
		handleClick(e, link) {
	      // 阻止点击的默认事件修改路由
	      e.preventDefault();
	      if(link.href) {
	        let ele = document.getElementById(link.href);
	        ele && ele.scrollIntoView({block: 'start', behavior: 'smooth'});
	      }
	    }
	}
}
</script>

实际测试发现，调用e.preventDefault()之后，只会阻止URL被修改，并不会阻止点击锚点后的滚动事件。这样的话，那句scrollIntoView就可以不用了。