检查使用vue-router时是否可以前进

Question

我正在使用 Vue2 和 Vue-router（版本 ^2.2.0）开发一个应用程序，后退和前进导航按钮必须显示用户是否可以后退/前进。

要检查用户是否可以返回，很简单：如果用户不在主屏幕上，他可以。

问题出现在检查用户是否可以前进时，因为我需要检查路由器的历史记录，但我无法这样做。

有没有办法检查路由器是否有“调用 router.go(1) 时要去的地方”？

Answer 1

网络应用程序？

router.go(n)

是

history.go(n)

所以它有同样的限制。将一个人的历史记录暴露在网站上是不安全的。此外，仅仅因为他们在家并不意味着他们不能回去，仅仅因为用户可以前进并不意味着它会导航到您应用程序中的某些内容。如果您尝试复制前进和后退按钮，您将会遇到麻烦。

如果它不是 Web 应用程序，那么您需要像浏览器一样手动跟踪用户历史记录并拼接、替换和推送。

Answer 2

您是否启用了 HTML5-history-mode 配置？可以在此处找到文档。

您可能还需要在您的服务器中启用它。如果您使用的是 Express，我的服务器代码中有这一行：

app.use(require('connect-history-api-fallback')());

Answer 3

我用 Vue 3 和 Vue-Router 找到了一个解决方案。

使用 HTML5-Mode 创建路由器，如下所示：

import { createRouter, createWebHistory } from 'vue-router';

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: MyComponent },
    // further routes
  ],
});

以及以下带有

Back

和

Forward

按钮的 Vue 组件：

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { computed, ref, watch } from 'vue';

const router = useRouter();
const route = useRoute();

watch(
  () => route.fullPath,
  () => {
    isForwardDisabled.value = !history.state.forward;
  },
);

const isForwardDisabled = ref(true);
const isBackButtonDisabled = computed(() => route.fullPath === '/');
</script>

<template>
  <div>
    <button
      :disabled="isBackButtonDisabled"
      @click="router.back()"
    >
      Back
    </button>
    <button
      :disabled="isForwardDisabled"
      @click="router.forward()"
    >
      Forward
    </button>
  </div>
</template>