Vue路由器检查直接路由

Question

根据文档

         `router.go(-1)` 

将返回一条记录

如何知道该URL（或路由器）是否已被直接访问或具有历史记录，以便我可以使用

         `router.go(1)`

Answer 1

在History Api

中找到了答案

   const history = window.history.length;
   if (history > 2) {
      this.$router.go(-1);
    } else {
      this.$router.push(`/`);
    }

Answer 2

历史数组与 documentation 中的 browser session history (that is, the pages visited in the tab or frame that the current page is loaded in) 紧密相关。

这意味着同一选项卡中的硬刷新或直接导航将使 history 数组填充以前的条目。并且 window.history.length 检查将失败。

因此我认为 VUE 的检测方法是使用 navigation guards。

在输入新路由之前，我们可以检查之前的 URL 是否是已知的应用路由。并相应地更新商店属性（此处为 directRoute，默认为 null）：

router.beforeEach((to, from, next) => {
    const previousRoutes = from.matched.length;
    const isJustLanding = store.state.directRoute === null && previousRoutes === 0;

    store.commit("updateDirectRoute", isJustLanding);

    next();
}