时间戳

首页 > 解决方案 > 如何使用路由器链接自定义导航而不是`to`道具

vue.js - 如何使用路由器链接自定义导航而不是`to`道具

问题描述

<router-link to="/"  tag="a" :title="title">
            <span class="icon icon-home i-large" />
            <span class="class-2">Name</span>
        </router-link>

这就是我所拥有的...

如您所见，我正在使用to道具。但我不想使用它。每当有人点击它时，我想执行一个功能并使用程序导航。

这怎么可能？我拥有的结构和 html 不应该改变，它仍然应该按预期工作。

标签： vue.jsvuejs2vue-componentvuex

解决方案

我认为不可能更改:to props以添加函数，因为它被预定义为仅接受其文档中的字符串。https://router.vuejs.org/api/#to

但是，我建议另一种实现您想要的方法，您可以在beforeEach钩子中添加逻辑。例如

router.beforeEach( (to, from, next) => {

  // implement your logic here, for example if no internet, go to error page

  if (!navigator.onLine && to.name !== "NetworkError") {
    next({ name: "NetworkError" });
    return false;
   }
  next();
}

有关更多信息，请查看他们的文档：https ://router.vuejs.org/api/#router-beforeeach

推荐阅读