如何设置 vue.js 忽略锚标签？

Posted 2023-02-22

【中文标题】如何设置 vue.js 忽略锚标签？

【英文标题】：How to setup vue.js to ignore anchor tags?

【发布时间】：2016-09-30 04:26:05

【问题描述】：

我使用 VueRouter 和 HTML5 历史模式。我使用带有锚标签的引导程序“导航”。当用户点击任何锚标签时，Vue 应用程序会重新加载。

html示例

<a href="#tab_contacts" data-toggle="tab">Contacts</a>

有什么方法可以通过路由器忽略锚标签吗？

【问题讨论】：

路由器已经忽略了锚标签。问题可能存在于其他地方。

【参考方案1】：

你可以使用canDeactivate hook来阻止vue重新加载页面，例如：

  route: 
    //called before page deactivate
    canDeactivate: function(transition) 
        if(...)//check if the route should be ignored

           transition.abort(); //this will stop vue-router from reloading the page
        
    

【讨论】：

凯翠，你的解决方案不适用于锚标签。它仅适用于 vue 链接。