@wjtools/uni-router NPM

uni-router

一款类似 vue-router 的 uni-app 路由插件

本插件修改自 vue-router-uni 和 megalo-router 感谢作者的开源！

版本记录

1.0.7
fix:兼容百度小程序没有 $mp.page.route 的问题
1.0.2
fix: 兼容 tabBars 路径不以/开头的配置
1.0.1
fix: 修复在 app 上的一个兼容问题
1.0.0
在原插件基础上定制开发

安装

yarn add @wjtools/uni-router

使用

// main.js
import router from '@wjtools/uni-router'

Vue.use(router, {
  mode: 'strict', // loose 模式用 relaunch 跳转 tab 页，可以传参
  tabBars: [
    '/pages/index',
    '/pages/my'
  ]
})

Vue.use 的 option 接受一个 mode 变量，表示路由的模式，有两种模式可选，strict 或者 loose，默认是严格模式

Vue.use 的 option 接受一个 tabBars 变量，为小程序的 tabBar 路径列表

strict 严格模式，如果使用 push 或者 replace 携带参数跳转到 tab 页面，将使用 switchTab 进行跳转，此时 tab 页面无法接收到参数，这是小程序自身的限制：switchTab 无法传参
loose 宽松模式，如果使用 push 或者 replace 携带参数跳转到 tab 页面，将使用 relaunch 进行跳转，此时 tab 页面可以接收到参数，但是这意味着程序将重新载入

API

支持以下列出的方法及属性

属性

$Router.app

获取全局的 app，相当于 getApp()

在普通页面使用

onLoad() {
  console.log(this.$Router.app)
}

在 App.vue 使用要结合 $Router.ready 使用

  onLaunch() {
    this.$Router.ready(() => {
      console.log(this.$Router.app) // 成功
    })
  }

$Router.currentRoute & $Route

包含如下信息：

{
  query: {} // 页面路由参数
  path: '' // 不带参数的基本路径
  fullPath: '' // 完整路径，带参数
}

在普通页面使用

onReady() {
  console.log(this.$Route.query)
  console.log(this.$Route.path)
  console.log(this.$Route.fullPath)
}

在 App.vue 使用要结合 $Router.ready 使用

  onLaunch() {
    this.$Router.ready(() => {
      console.log(this.$Route) // 成功
      console.log(this.$Router.currentRoute) // 成功
    })
  }

方法

$Router.ready()

接收一个回调函数作为参数

在 App.vue 中获取 $Router.app、$Route 对象或者 $Router.currentRoute，需要调用 $Router.ready

  onLaunch() {
    this.$Router.ready(() => {
      console.log(this.$Router.app) // 成功
      console.log(this.$Route) // 成功

    })
  }

如果在 App.vue 中不使用 $Router.ready方法直接获取 $Router.app 或者 $Route 的话会导致失败，因为此时 Router 并未初始化完成

$Router.push()

打开一个新页面，如果是打开 tabBar 页面，实际是使用 switchTab，否则使用 navigateTo

如果是跳转到 tabBar 页面，是无法进行传参的，如果真的要传参到 tabBar 页面，请使用 relaunch 或者路由模式配置为宽松模式（loose）

  // 使用参数和路径进行跳转
  $Router.push({path: '/pages/index', query: {id: 1}})

  // 或者直接传递一个路径
  $Router.push('/pages/index?id=1')

$Router.replace()

在当前页面打开新页面进行替换，如果是打开 tabBar 页面，实际是使用 switchTab，否则使用 redirectTo

传参方式同 $Router.push

  // 使用参数和路径进行跳转
  $Router.replace({path: '/pages/index', query: {id: 1}})

  // 或者直接传递一个路径
  $Router.replace('/pages/index?id=1')

$Router.go()

回退页面

  $Router.go(-1) // 后退一页
  $Router.go(0) // 重新载入当前页面 相当于 relaunch 当前页面

$Router.back()

回到上一页，同 $Router.go(-1)

$Router.relaunch()

重新载入程序

  // 使用参数和路径进行跳转
  $Router.relaunch({path: '/pages/index', query: {id: 1}})

  // 或者直接传递一个路径
  $Router.relaunch('/pages/index?id=1')

$Router.getPlatform()

获取当前所在平台对象，返回值为一个 Promise

使用方法

async onReady() {
  const platform = await this.$Router.getPlatform()
  console.log(platform)
  // 微信小程序里面得到的是 wx 对象
  // 支付宝小程序里面得到的是 my 对象
}

$Router.platform.ready()

接收一个回调，回调的参数为当前所在平台对象，作用跟 getPlatform 一样，是基于 getPlatform 的封装

使用方法

async mounted() {
  this.$Router.platform.ready(platform => {
    console.log(platform)
  })
}

注意事项

传参问题
tabBar 页面接收参数的话应该使用 relaunch(小程序自身的限制) 或者开启路由的宽松模式
如果 query 传参中带有路径或者网址作为参数，请使用 encodeURIComponent 和 decodeURIComponent 进行编码解码，否则可能发生未知错误或者丢参

跳转路径问题
所有跳转的路径都是使用 '/' 开头的

路由跳转回调问题

如果需要对跳转的成功或者失败进行回调处理，可以在跳转时候传入回调

$Router.replace({
  path: '/pages/index',
  query: {id: 1},
  success: res => { console.log('跳转成功', res) },
  fail: err => { console.log('跳转失败', err) },
  complete: res => { console.log('跳转结束', res) }
})

分包页面的跳转写法
uni 默认的分包页面之间的跳转比较麻烦，需要写相对路径，例如从 home/index 跳转到 packgeA/pages/a/index，相对路径为 ../../packgeA/pages/a/index
使用 uni-router 则没有这种烦恼，直接
```
  $Router.push('/packgeA/pages/a/index')
```