小程序的路由改造

发表于 本文字数： 1.4k 阅读时长 ≈ 1 分钟
众所周知，在小程序中跳转页面的方法除了navigateTo，还有redirectTo，reLaunch，switchTab。但是这些方法都有一些限制，比如redirectTo和reLaunch不能打开tabBar页面，navigateTo和switchTab不能打开非tabBar页面。为了解决这个问题，我们需要对小程序的路由进行改造，使其能够满足我们的需求。

首先，我们需要创建一个全局的路由对象，用于存储所有的页面路径和对应的页面组件。

1
2
3
4
5
6
7
8
9
10
11
12
// router.js
const router = {
  pages: [],
  addPage(page) {
    this.pages.push(page);
  },
  getPage(path) {
    return this.pages.find(page => page.path === path);
  }
};

export default router;

然后，我们需要在每个页面组件中注册自己的路径和对应的页面组件。

1
2
3
4
5
6
7
// index.js
import router from './router';

router.addPage({
  path: '/pages/index/index',
  component: require('./index').default
});

接下来，我们需要在 app.js 中初始化路由对象，并注册全局的路由方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// app.js
import router from './router';

App({
  onLaunch() {
    // 初始化路由对象
    router.pages = this.pages;
  },
  navigateTo(options) {
    const page = router.getPage(options.url);
    if (page) {
      // 如果页面存在，则跳转到对应的页面
      page.component.navigateTo(options);
    } else {
      // 如果页面不存在，则跳转到404页面
      wx.navigateTo({
        url: '/pages/404/404'
      });
    }
  },
  redirectTo(options) {
    const page = router.getPage(options.url);
    if (page) {
      // 如果页面存在，则跳转到对应的页面
      page.component.redirectTo(options);
    } else {
      // 如果页面不存在，则跳转到404页面
      wx.redirectTo({
        url: '/pages/404/404'
      });
    }
  },
  // 其他路由方法...
});

最后，我们需要在每个页面组件中实现自己的路由方法。

1
2
3
4
5
6
7
8
9
10
11
12
// index.js
import router from './router';

Page({
  navigateTo(options) {
    wx.navigateTo(options);
  },
  redirectTo(options) {
    wx.redirectTo(options);
  },
  // 其他页面方法...
});

通过以上改造，我们就可以在全局范围内使用统一的路由方法，并且可以根据需要动态加载页面组件。这样不仅提高了代码的可维护性，还使得路由管理更加灵活和可扩展。