naive-ui中Anchor点击侧边栏导航锚点跳转，却是新页面的问题；
最近开发过程用 有使用锚点定位跳转的功能，于是使用了naive-ui的Anchor组件，组件demo代码 套用到项目上的时候，右侧内容滚动时候，侧边栏的锚点会
自动高亮，这个是没有问题的，然后问题来了，点击左边锚点时候，右边的页面不会定向到对应位置，而是跳转了新页面，因为vue-router路由模式把锚点定位
理解成了新页面的跳转。
再回头看了一下 naive-ui组件说明，它是提供的有组件方法的，scrollTo,但是点击事件直接是默认的组件里面的a链接跳转，跳珠到了新页面。 终于在思考了片刻之后，想到组件上使用点击事件加vue指令的修饰符应该是可以解决的。
于是最终解决方案如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<n-anchor
ref="anchorRef"
:show-rail="showRail"
:show-background="showBackground"
:bound="0"
:offset-target="'.inner_page_bg.portrait .right'"
>
<n-anchor-link
v-for="(item, i) in anchorList"
:title="item.split('-')[0]"
:href="'#d' + (i + 1)"
:class="item.split('-')[1] == 'later' ? 'disable_anchor' : ''"
@click.capture.prevent="item.split('-')[1] == 'later' ? scrollTo(i + 1) : ''"
/>
</n-anchor>
使用修饰符 capture设置捕获模式，prevent禁止捕获，最终点击事件止步于组件的外壳上，然后传参，使用scrollTo 滚动调位到对应的锚点 @click.capture.prevent=”item.split(‘-‘)[1] == ‘later’ ? scrollTo(i + 1) : ‘’”
1
2
3
4
5
const anchorRef = ref(null);
const scrollTo = (num) => {
anchorRef.value?.scrollTo("#d" + num);
};
那么这个问题就解决了,