nuxt使用NuxtLink组件定义路由的锚点定位,使用:target伪元素无效问题的解决方法。

发布时间 2023-04-27 14:38:45作者: 星小梦

原因在使用NuxtLink组件进行路由之间的锚点跳转的时候,:target伪元素无法应用到目标元素。

出现这种情况一般是由于你没有将这个组件标记为外部组件,发现标记外部组件即可正确的进行锚点定位了。

原因可能就是nuxt会预读取属性,可能对标签的点击事件做了自定义处理,从而导致html的a标签的自带锚点失效了,无法导致目标元素上添加:target伪元素。

解决方法:
<NuxtLink ... :external="true" >#锚点按钮

添加黄色区域的属性即可解决nuxt进行锚点定位,导致:target伪元素无效的解决方法。