解决在vue-pure-admin框架中,锚点失效的问题

258 阅读1分钟

最近遇到了个网页上锚点不生效,表现异常,一点击就组件刷新的问题,最后发现是框架路由守卫的问题。

接手了个项目,使用的是vue-pure-admin,ui框架是elementplus。有个需求,需要用到锚点功能,来实现类似导航目录的功能。

问题出现在路由守卫上。url一改变,就会出发路由守卫,按其逻辑走到最后,会调用next()。但我们点击锚点导致的url变更,不应该调用到next(),造成里组件更新,浏览器才能行使正常锚点功能。

知道了问题,那就好解决了。首先要识别 哪些情况是锚点,锚点导致的url变更有两个特点,1 是锚点之前的url不会有任何变化,2是一定有hash,就是部分#xxxxx那个部分。判断出来后直接return掉,问题解决。

当然,让element plus中的 el-anchor 锚点组件运作正常,还有一些其他的坑,因与主题无关,这里就不一一详述了。