更新记录

1.0.1(2019-07-19)

change platform to uni


平台兼容性

vue-router-uni

配合dcloud框架uni使用的Router,尽量保持与vue-router一致的开发体验,减少技术成本,方便项目从web迁移到uni

修改自 https://github.com/NextBoy/megalo-router, 只是简单改成uni,platform 无法判断

优化uni的分包页面的跳转写法

uni默认的分包页面之间的跳转比较麻烦,需要写相对路径,例如 例如从 home/index 跳转的到 packgeA/pages/a/index,相对路径为 ../../packgeA/pages/a/index。

使用vue-Router-uni则没有这种烦恼,直接

    $Router.push('/packgeA/pages/a/index')

版本记录

  • 1.0.1

    feat: 增加back() 方法

  • 1.0.2

    fix: 修复APP.vue的onLaunch里面调用报错的问题

  • 1.0.3

    feat: 增加$Router.ready方法
    feat: 增加Router模式配置
    feat: 增加$Router.app 获取全局对象

  • 1.0.4

    fix: 修复在最新的脚手架生成的项目下无法运行的问题

安装

npm i vue-router-uni --save

使用

// app.js or main.js
import Router  from 'vue-router-uni'

Vue.use(Router, {
    mode: 'strict' // strict or loose 可配置项,不配置的话默认为strict
    tabBars: [ // 必须配置项
        '/pages/hello',
        '/pages/my/index'
    ]
})

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

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

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

注意:该路径必须以 '/' 开头

API

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

Router 实例

属性

  • $Router.app

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

注意:在App.vue中使用的话需要结合$Router.ready(();在普通的page页面使用则无限制

在普通页面使用


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

在App.vue使用

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

包含如下信息:

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

在page页面内通过$Route获取参数(在APP.vue里面使用$Route的话需要结合$Router.ready)

在普通页面使用


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

在App.vue使用

    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中不使用ready方法直接获取 $Router.app或者$Route的话会导致失败,因为此时Router并未初始化完成

  • $Router.push()

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

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

    // 使用参数和路径进行跳转
    $Router.push({query: {id: 1}, path: '/pages/hello/index'})
    // 或者直接传递一个路径
    $Router.push('/pages/hello/index?id=1')
  • $Router.replace()

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

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

    // 使用参数和路径进行跳转
    $Router.replace({query: {id: 1}, path: '/pages/hello/index'})
    // 或者直接传递一个路径
    $Router.replace('/pages/hello/index?id=1')
  • $Router.go()

回退页面

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

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

  • $Router.reLaunch()

重新载入小程序

    // 使用参数和路径进行跳转
    $Router.reLaunch({query: {id: 1}, path: '/pages/hello/index'})
    // 或者直接传递一个路径
    $Router.reLaunch('/pages/hello/index?id=1')
  • $Router.getPlatform()

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

使用方法

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

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

使用方法

async mounted () {
    this.$Router.platform.ready(platform => {
        console.log(platform)
        // 微信小程序里面得到的是wx对象
        // 百度小程序里面得到的是swan对象
        // 支付宝小程序里面得到的是my对象
    })
}

提示

  • 传参问题

    tabBar页面接收参数的话应该使用reLaunch(小程序自身的限制) 或者开启路由的宽松模式

    如果query传参中带有路径或者网址作为参数,请使用encodeURIComponent 和 decodeURIComponent进行编码解码传递,否则可能发生未知错误或者丢参

  • 跳转路径问题

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

  • 路由跳转回调问题

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

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问