uni-app 中的AsyncError中组件具有获取router的能力吗

[yihan12]

在 AsyncError 组件中，你无法直接获取到导致加载失败的那个页面的路由信息（例如它的完整路径和参数），因为那个页面组件根本还没有加载成功。但是，你完全可以获取到当前的路由状态和导航信息。

下面我们来详细解释为什么以及如何操作。

---

1. 为什么无法直接获取“失败页面”的路由？

生命周期时机问题：
当 AsyncError 组件被显示时，意味着uni-app尝试导航到一个新页面（例如 /pages/detail/detail?id=123），但在加载该页面的JS文件时失败了。关键的点在于：这个导航过程并没有完成。

• Vue Router 的导航守卫可能还没有完全解析。
• 目标页面组件压根不存在于当前的应用实例中，因此你无法从Vue的视角去访问它。
• uni-app的路由栈（页面栈）仍然停留在你跳转前的那个页面。你并没有成功跳到新页面，所以新页面的路由信息还不是“当前路由”。

因此，在 AsyncError 组件内部，你访问到的“当前页面”仍然是跳转前的页面。

---

2. 如何在 AsyncError 组件中获取路由信息？

虽然拿不到“失败页面”的完整信息，但你有以下几种强大的方法来解决问题：

方法一：使用 Uni-App 的 API 获取当前页面栈（最常用）

你可以使用 getCurrentPages() 这个API。它返回当前所有的页面栈信息，数组的最后一项就是当前显示的页面（也就是 AsyncError 组件所在的这个webview）。

<!-- components/async-error.vue -->
<template>
  <view class="custom-error">
    <text>页面加载失败</text>
    <text>当前路径: {{ currentRoute }}</text>
    <button @click="retry">重新加载</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentRoute: ''
    }
  },
  onLoad() {
    // 获取当前页面栈
    const pages = getCurrentPages();
    // 当前页面实例是栈的最后一个元素
    const currentPage = pages[pages.length - 1];
    // 获取当前页面的路由信息（注意：这是AsyncError组件自身页面的路由）
    this.currentRoute = currentPage.route;
    
    console.log('当前页面栈：', pages);
    console.log('当前页面路由：', currentPage.route);
    console.log('当前页面参数：', currentPage.options); // 可以获取到打开本页时传递的参数
  },
  methods: {
    retry() {
      // 重试逻辑...
    }
  }
}
</script>

方法二：从导航失败的上下文中获取（理想但复杂）

理论上，最完美的方式是在导航发生错误的地方（例如在 uni.navigateTo 的成功/失败回调中，或在全局的 onError 钩子里）捕获错误，并将目标路由信息通过某种方式（如Vuex、全局变量、或传递参数）给 AsyncError 组件。

然而，由于uni-app的异步页面加载是框架内部行为，我们很难直接在这个环节介入。一种Hacky的方法是利用页面传参：

1. 跳转时：在调用 uni.navigateTo 时，除了正常的参数，额外传递一个包含目标页面路径的参数。

   // 在A页面跳转时
   uni.navigateTo({
     url: '/pages/detail/detail?id=123&failedRedirect=/pages/detail/detail&failedParams=' + encodeURIComponent(JSON.stringify({id: 123})),
     success: () => console.log('导航成功'),
     fail: (err) => console.log('导航失败', err) // 注意：JS加载失败可能不会触发这里的fail
   });

2. 在 AsyncError 组件中：通过 onLoad 生命周期选项接收这个参数。

   // 在 AsyncError 组件中
   onLoad(options) {
     // options 会包含 failedRedirect 和 failedParams
     this.failedUrl = options.failedRedirect;
     this.failedParams = JSON.parse(decodeURIComponent(options.failedParams || '{}'));
     console.log('原本想跳转到：', this.failedUrl, '参数是：', this.failedParams);
   }

然后在重试方法 retry 中，使用 this.failedUrl 和 this.failedParams 来重新构造跳转链接。

注意：这种方法非常不优雅，且耦合度高，不推荐作为主要方案，仅作为思路拓展。

方法三：全局状态管理（Vuex/Pinia）

这是最规范和强大的方法。

1. 在跳转前，将目标路由信息存入全局状态（如Vuex）。

   // store/index.js (Vuex example)
   state: {
     lastNavigationAttempt: null
   },
   mutations: {
     SET_LAST_NAVIGATION(state, payload) {
       state.lastNavigationAttempt = payload;
     }
   }
   
   // 在A页面跳转前
   this.$store.commit('SET_LAST_NAVIGATION', {
     url: '/pages/detail/detail',
     params: { id: 123 }
   });
   uni.navigateTo({ url: '/pages/detail/detail?id=123' });

2. 在 AsyncError 组件中，从全局状态中读取最后一次尝试的导航信息。

   <!-- AsyncError.vue -->
   <script>
   import { mapState } from 'vuex';
   export default {
     computed: {
       ...mapState(['lastNavigationAttempt'])
     },
     methods: {
       retry() {
         if (this.lastNavigationAttempt) {
           // 构建查询字符串
           const params = new URLSearchParams(this.lastNavigationAttempt.params).toString();
           const url = `${this.lastNavigationAttempt.url}?${params}`;
           uni.redirectTo({ url });
         }
       }
     }
   }
   </script>

---

总结与最佳实践

方法	优点	缺点	推荐度
getCurrentPages()	简单直接，无需额外代码，可获取当前页面参数。	获取到的是AsyncError页自身的路由，非失败页的完整信息。	⭐⭐⭐⭐☆
传递额外参数	理论上可以传递任何信息。	非常Hacky，代码耦合度高，不优雅。	⭐☆☆☆☆
全局状态管理 (Vuex)	最规范、最强大，信息清晰可管理，AsyncError组件可轻松获取。	需要项目已引入状态管理库，增加一点复杂度。	⭐⭐⭐⭐⭐

给你的最终建议：

对于大多数项目，结合使用 getCurrentPages() 和 全局状态管理 (Vuex/Pinia) 是最佳方案。

1. 在 AsyncError 组件内，使用 getCurrentPages() 来获取基本的当前页面信息。
2. 在重要的导航动作前，通过 Vuex 存储目标路由，这样在任何地方（包括 AsyncError 组件）都可以获取到最准确的失败导航信息，从而实现完美的重试功能。