快捷導(dǎo)航

用了都說好的uniapp 路由框架

更新時(shí)間：2026年05月09日 10:40:35 作者：風(fēng)度前端

文章主要介紹了uni-app中路由跳轉(zhuǎn)api的不足之處,并提出了一個(gè)名為caring-route的封裝包,解決了傳參問題,感興趣的可以了解一下

背景

在使用 uni-app 開發(fā)項(xiàng)目時(shí)，路由跳轉(zhuǎn)是極為頻繁的操作，uni-app 提供的路由跳轉(zhuǎn) api uni.navigateTo夠用但是卻不夠好用，主要問題在于，實(shí)際業(yè)務(wù)中經(jīng)常涉及大量對象傳參的情況，而 uni-app 只支持 query 參數(shù)，這就導(dǎo)致，對于對象的傳參，必須通過encodeURIComponent先編碼，然后在新的頁面再通過decodeURIComponent進(jìn)行解碼，為了編碼 url，還要拼接&，導(dǎo)致一個(gè)頁面跳轉(zhuǎn)傳參又臭又長，可讀性還很差，比如像下面這樣：

uni.navigateTo({
    url: '/pages/test/pay?question_id=' +
    res.data.id + '&service=' +
    encodeURIComponent(JSON.stringify(
        service)) + '&doctor=' +
    encodeURIComponent(
        JSON.stringify({
            name: this.doctor.name,
    dept_name: this.doctor
    .dept_name,
    dept_code: this.doctor
    .dept_code,
    code: this.doctor.code
    })) + '&description=' +
    encodeURIComponent(desc)
})

光看著就頭大，要增加一個(gè)傳參或者修改一個(gè)傳參，都很考察眼力，尋找拼接的位置，獲取參數(shù)的時(shí)候，也很雞肋：

onLoad: function(query) {
  this.pageHeight = uni.getSystemInfoSync().windowHeight
  this.question_id = query.question_id
  this.service = JSON.parse(decodeURIComponent(query.service.replace(/%/g, '%25')))
  this.doctor = JSON.parse(decodeURIComponent(query.doctor.replace(/%/g, '%25')))
  this.description = decodeURIComponent(query.description.replace(/%/g, '%25'))
}

由此，解決這一痛點(diǎn)就勢在必行了，項(xiàng)目中雖然使用了u-view框架，提供了$u.route的方法，對 uni-app 的路由跳轉(zhuǎn)方法進(jìn)行簡單的封裝，可以支持通過第二個(gè)參數(shù)以對象的方式傳參：

this.$u.route({
  url: 'pages/components/empty/index',
  params: {
    name: 'lisa'
  }
})

其優(yōu)點(diǎn)是，對路由跳轉(zhuǎn)傳參友好了一點(diǎn)，看起來更簡潔些，但是也僅此而已了，存在的缺陷也很大，主要在于：

僅支持值類型的傳參，不支持引用類型傳參，仍舊未解決實(shí)際業(yè)務(wù)中對對象數(shù)據(jù)傳參的需要。
閹割版的封裝，無法傳遞events，對實(shí)際業(yè)務(wù)中頁面返回的回調(diào)無法監(jiān)聽。

但u-view也啟發(fā)了我對路由封裝的一些思路，結(jié)合對axios的使用，我對uni-app的路由跳轉(zhuǎn)方法進(jìn)行了定制化的封裝，并單獨(dú)發(fā)布了包caring-route，且成功在業(yè)務(wù)中使用，基本解決了上述問題。

caring-route 的特點(diǎn)

繼承了uni-app 的所有路由跳轉(zhuǎn)方法，更加方便調(diào)用，名稱更簡潔
支持跳轉(zhuǎn) tabBar 頁面
支持 events
支持成功失敗回調(diào)
支持傳遞引用類型路由參數(shù)
支持解析路由參數(shù)
rollup打包壓縮，體積更小，僅有2.7kb
支持跳轉(zhuǎn)小程序

支持兩種調(diào)用方法

函數(shù)調(diào)用：route(url[,config])
類的實(shí)例方法調(diào)用：route[method](url[,params])

method 的類型：

to
back
tab
redirect
launch
mini 跳轉(zhuǎn)小程序
query 解析路由參數(shù)

快速上手

安裝

npm i caring-route

使用

vue

<script>
  import route from 'caring-route'

  route('/pages/index/home')
</script>

基礎(chǔ)使用

對于不需要傳遞參數(shù)的路由跳轉(zhuǎn)，route函數(shù)提供了原生的方法名稱和簡化的方法名稱，并支持兩種傳參方式：

一種是類似u-view的，傳遞兩個(gè)參數(shù)route(url,data)，第一個(gè)參數(shù)url就是要跳轉(zhuǎn)的路由，第二個(gè)參數(shù)data則是要傳遞的參數(shù)，與$u.route的區(qū)別就是支持傳遞對象參數(shù)，是其加強(qiáng)版，當(dāng)只需要跳轉(zhuǎn)路由和傳遞參數(shù)時(shí)，推薦優(yōu)先使用route(url,data)的調(diào)用方式。

第二種是類uni-app的調(diào)用方法，傳遞一個(gè)參數(shù)route(config)，其基本使用和 uni-app 是相同的，區(qū)別在于：

uniapp中參數(shù)需要通過query參數(shù)拼到 url 上，而route(config)的 url只傳遞跳轉(zhuǎn)的頁面路徑即可，其頁面參數(shù)用data或者params來接收。
uniapp中需要通過不同的方法navigateTo、redirectTo等來執(zhí)行不同的路由跳轉(zhuǎn)，而route(config)支持type參數(shù)來指定跳轉(zhuǎn)類型是navigateTo還是redirectTo

下面具體說明

傳遞兩個(gè)參數(shù)route(url,data)的使用方法

對于uni.navigateTo的封裝

這個(gè)方法是路由跳轉(zhuǎn)中最常使用的 api，caring-route做了三種方法的封裝，三個(gè)方法是等價(jià)的，實(shí)際業(yè)務(wù)中，直接使用route()函數(shù)是最方便的

// uni.navigateTo
route('/pages/index/home')
route.to('/pages/index/home')
route.navigateTo('/pages/index/home')

對于uni.redirectTo的封裝

// redirectTo
route.direct('/pages/index/home')
route.redirectTo('/pages/index/home')

對于uni.reLaunch的封裝

route.launch('/pages/index/home')
route.reLaunch('/pages/index/home')

對于uni.navigateBack的封裝

// back
route.back(delta)
route.navigateBack(delta)

對于uni.switchTab的封裝

// switchTab
route.tab('pages/index/index')
route.switchTab('pages/index/index')

傳遞路由跳轉(zhuǎn)參數(shù)

route函數(shù)傳入第二個(gè)參數(shù)，類型為對象，即為傳遞的路由參數(shù)，

route('/pages/index/home', {
  name: 'wanko',
  age: '25',
  hoby: {
    guitar: {
      level: 1
    }
  }
})
route.to('/pages/index/home', {
  name: 'wanko',
  age: 25,
  hoby: {
    guitar: {
      level: 1
    }
  }
})
route.launch('pages/index/index', {
  msg: 'relunch過來'
})
route.redirect('/pages/index/home', {
  msg: 'redirect過來'
})

傳遞一個(gè)參數(shù)route(config)的使用方法

route({
    url:'/pages/index/home',
    type: 'navigateTo',// 默認(rèn)的跳轉(zhuǎn)方式，可不傳
    data: {
      name: 'wanko',
        age: 25,
        hoby: {
          guitar: {
            level: 1
          }
        },
        arr: [1, 2, 3, 4, 5],
        arrObj: [
          {
            name: 'wanko'
          },
          23,
          'age'
        ]
    },
    events: {
      onSuccess: (data) => {
        console.log('onSuccess', data)
      }
    }
  })

監(jiān)聽events事件

// A頁面
route({
  type: 'navigateTo', // 如果是navigateTo，可以不傳type
  url: '/pages/index/home', 
  events: {
    onSuccess: (data) => {
      console.log('onSuccess', data)
    }
  },
})
// B頁面
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('onSuccess', {
  data: 'data from home'
})
route.back()

獲取路由參數(shù)

在onLoad中使用route的 query 方法傳入 options ，函授調(diào)用的返回值為已經(jīng)解碼的路由參數(shù)

onLoad(options) {
  const query = route.query(options)
}

處理跳轉(zhuǎn)成功的回調(diào)

使用函數(shù)調(diào)用方式，添加 .then

route('pages/index/index').then(res => console.log('跳轉(zhuǎn)成功'))

跳轉(zhuǎn)微信小程序

使用 mini(appId, path) 方法來跳轉(zhuǎn)微信小程序

route.mini('wx-appid', 'pages/tabbar/components').then(() => {
  console.log('跳轉(zhuǎn)成功')
})

開源地址

https://github.com/caring-ui/caring-route

到此這篇關(guān)于用了都說好的uniapp 路由框架的文章就介紹到這了,更多相關(guān) uniapp 路由框架內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线