【Vue3】全局判断go(-1)时是否具有上一个路由的解决思路

81 阅读1分钟

解决问题:

  1. 无法正确执行go(-1)导航操作:在一些情况下,当浏览器的历史记录长度为1时(即当前页面是第一个页面),直接执行go(-1)导航操作可能不会产生任何效果。这段代码的作用是在这种情况下进行处理,确保始终有一个上一个路由可用。
  2. 页面导航异常:如果直接执行go(-1)导航操作,但没有对历史记录长度和URL进行判断和处理,可能会导致页面导航出现异常。例如,可能会导致页面刷新或跳转到错误的页面。

解决方案:

只需要在app.vue中添加:

// 用于go(-1)时判断是否是有上一个路由
const goIndex = () => {
  // 检查浏览器的历史记录长度
  if (window.history.length <= 1) {
    // 如果历史记录长度小于等于1,表示当前是第一个页面,没有上一个路由
    // 检查当前页面的URL是否包含查询参数 '?'
    if (location.href.indexOf('?') === -1) {
      // 如果URL不包含查询参数 '?'
      // 将当前页面的URL末尾添加查询参数 '?goindex=true' 并进行页面重定向
      window.location.href = location.href + '?goindex=true';
    } else if (
      location.href.indexOf('?') !== -1 &&
      location.href.indexOf('goindex') === -1
    ) {
      // 如果URL包含查询参数 '?' 且不包含 'goindex' 查询参数
      // 将当前页面的URL末尾添加查询参数 '&goindex=true' 并进行页面重定向
      window.location.href = location.href + '&goindex=true';
    }
  }
};

// 调用函数进行判断和重定向
goIndex();