uni-app 希望提供类似 vue-router 的路由拦截功能 以增强自身生态圈

在 Uni-App 中实现类似 Vue-Router 的路由拦截功能，可以通过全局的 onLaunch、onShow 生命周期函数以及页面级的 onLoad 或 onShow 方法来实现。虽然 Uni-App 没有直接提供与 Vue-Router 完全一致的路由拦截 API，但你可以通过一些编程技巧来模拟类似的功能。

以下是一个简单的示例，展示如何在 Uni-App 中实现路由拦截功能：

1. 定义路由拦截逻辑： 首先，我们定义一个全局的路由拦截逻辑。在这个例子中，我们将检查用户是否已登录，并根据登录状态决定是否允许访问目标页面。

// main.js 或 app.js
App({
  onLaunch: function() {
    // 初始化逻辑
    this.globalData = {
      userInfo: null, // 存储用户信息
    };
  },
  onShow: function(options) {
    // 每次应用显示时执行，可用于检查路由
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const route = currentPage.route;

    // 假设我们需要拦截 /protected 页面
    if (route === 'protected' && !this.globalData.userInfo) {
      uni.redirectTo({
        url: '/pages/login/login',
      });
    }
  },
  globalData: {
    userInfo: null,
  },
});

1. 页面级路由拦截： 在某些情况下，你可能需要在页面级进行更细粒度的路由拦截。这可以通过在目标页面的 onLoad 或 onShow 方法中添加逻辑来实现。

// pages/protected/protected.vue
<script>
export default {
  onLoad: function(options) {
    const app = getApp();
    if (!app.globalData.userInfo) {
      uni.redirectTo({
        url: '/pages/login/login',
      });
      return;
    }
    // 继续加载页面内容
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 加载页面数据的逻辑
    },
  },
};
</script>

1. 登录逻辑： 在用户登录成功后，更新全局的用户信息，以便在后续的路由拦截中能够正确判断用户的登录状态。

// pages/login/login.vue
<script>
export default {
  methods: {
    handleLogin() {
      // 假设登录成功
      const app = getApp();
      app.globalData.userInfo = { name: 'User', token: 'xxx' };
      uni.redirectTo({
        url: '/pages/protected/protected',
      });
    },
  },
};
</script>

通过上述方式，你可以在 Uni-App 中实现类似 Vue-Router 的路由拦截功能，从而增强应用的生态圈和用户体验。