1.介紹

mini-router 是一個在微信小程序中使用的路由模塊，主要用于在小程序中的路由模塊化和解耦，解決小程序中的路由地址的硬編碼。
Github: https://github.com/hellolad/mini-router

• 原生路由：

// 用法：1
wx.navigateTo({
  url: "/pages/logs/logs"
})

// 用法：2
wx.navigateTo({
  url: "/pages/logs/logs",
  success(res) {
    console.log("success", res) 
  },
  fail(err) {
    console.log("fail", err)
  },
  complete() {
    console.log("complete")
  }
})

// 用法：3（傳參）
wx.navigateTo({
  url: "/pages/logs/logs?key=value",
})

• mini-router

// 用法：1
app.$router.push("logs")

// 用法：2
app.$router.push("mine")
  .success(res => {
    console.log("success: ", res)
  })
  .fail(err => {
    console.log("fail: ", res)
  })
  .complete(_ => {
    console.log("complete")
  })

// 用法：3 (傳參)
app.$router.push("logs", { key: value })

2.使用方法

// 第一步：導(dǎo)入router模塊，并且在app.js里 給app設(shè)置一個屬性$router
// app.js
import MiniRouter from './route/router'
onLaunch: function () {
  this.$router = new MiniRouter()
},

// 第二步：配置route文件夾中的pages模塊 （url 直接復(fù)制app.json里的pages）
export default [
  {
    url: 'pages/index/index',
    name: 'index'
  },
  {
    url: 'pages/article/article',
    name: 'article'
  },
  {
    url: 'pages/mine/mine',
    name: 'mine'
  },
  {
    url: 'pages/logs/logs',
    name: 'logs'
  },
  {
    url: 'pages/login/login',
    name: 'login'
  },
  {
    url: 'pages/next/next',
    name: 'next'
  }
]

// 第三步：在需要的文件里 使用
app.$router.push("logs")

3.支持的方法

目前mini-router支持微信小程序里的路由的所有方法，函數(shù)名對比:

4.函數(shù)介紹

1. push(name, params = null)

   保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面

2. reLaunch(name, params = null)

   關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面 可傳遞參數(shù) 可跳轉(zhuǎn)到Tabbar頁面

3. redirect(name, params = null)

   關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面 可傳遞參數(shù) 不可重定向到Tabbar頁面

4. switchTab(name)

   跳轉(zhuǎn)到指定的Tab

5. back(delta = 1, params = null)

   關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。 沒有參數(shù) 代表返回上一頁

6. backHome(params = null)

   關(guān)閉所有頁面返回到首頁

5.錯誤處理

當(dāng)你輸入一個在pages模塊中找不到的路由時(log)，mini-router會拋出錯誤，例如：

app.$router.push("log", { log: "這是一個Log" })

// 打印
/*
!! Not found page ->：[log] !!; [Component] Event Handler Error @ pages/index/index#bound handlePushLogs
*/

6.獲取傳遞的參數(shù)

mini-router內(nèi)置了一個屬性params，它會根據(jù)你跳轉(zhuǎn)的頁面，動態(tài)的更換當(dāng)前屬性的值。

// 當(dāng)我傳遞了一個參數(shù) { log: "這是一個Log" }
app.$router.push("logs", { log: "這是一個Log" })

// 然后我在下一個界面的onShow/onLoad里接收
const params = app.$router.params
params.log // 這是一個Log

參數(shù)存儲在storage里，你可以通過小程序調(diào)試工具看到:

mini-router params

獲取參數(shù)時，你不必知道它存儲在storage里的key是什么，你只要拿app.$router.params就可以了

7.反向傳值

mini-router 通過back或者backHome函數(shù)實現(xiàn)反向傳值（反向攜帶參數(shù)）

app.$router.back(1, { isLogin: false })

// 中間頁傳值給最后一頁，最后一頁攜帶值給首頁
const { data } = app.$router.params
app.$router.backHome({ data })

當(dāng)你選擇不攜帶參數(shù)返回時，在首頁你將拿不到app.$router.params,因為mini-router會把params軟刪除，如果你需要的話，你還是可以從storage里拿到它。

8.狀態(tài)處理

mini-router同小程序一樣，提供三種狀態(tài)success， fail， complete
不同于小程序，mini-router使用鏈?zhǔn)秸{(diào)用來處理這三種狀態(tài)，

app.$router.push("mine")
  .success(res => {
    console.log("success: ", res)
  })
  .fail(err => {
    console.log("fail: ", res)
  })
  .complete(_ => {
    console.log("complete")
  })

9.query方式傳參

上面的都是通過params傳參，傳的參數(shù)緩存在了storage里，新增加的query類型傳參，將參數(shù)拼接到了url后面:

/**
 * Query 方式傳遞參數(shù)
 */
handlePushLogsQuery() {
  app.$router.push("logs", { log: "這是一個Log", name: "hellolad"}, 'query')
},

handlePushLoginQuery() {
  app.$router
    .push("login", { phoneNumber: "1561900000000" }, 'query')
    .success(res => {
      console.log("success: ", res)
    })
},

handleReLaunchArticleQuery() {
  app.$router.reLaunch("article", { articleId: '10002' }, 'query')
    .success(res => {
      console.log("success: ", res)
    })
},

handleRedirectLoginQuery() {
  app.$router.redirect("login", { phoneNumber: '1561900000000' }, 'query')
    .success(res => {
      console.log("success: ", res)
    })
},

// 獲取參數(shù)和普通的params傳參獲取參數(shù)一樣:
const { phoneNumber } = app.$router.params
// 也可以在onLoad(options)里獲取
console.log("login options", options)
// 生成的url類似：
/pages/login/login?phoneNumber=1561900000000

寄語：對于前端來說，可以說初窺門徑，想要更深入一步，還是要堅持不斷的學(xué)習(xí)和看源碼。mini-router可以實現(xiàn)小程序里路由的跳轉(zhuǎn)，也將成為我下一個小程序使用的路由模塊，如果有不足的地方歡迎題issuse，如果有好的想法，歡迎pull request。

Github: https://github.com/hellolad/mini-router