uniapp的路由库

1,657 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

玛卡巴卡啦啦啦

    Vue2有个Vue-router,uniapp参考了微信的小程序设计有个pages.json文件配置路由,但是从Vue入门uni-app的话,还是想搞个router的,尤其是兼容多端开发时,有个路由会舒服很多,但如果直接在uni-app中下载一个vue-router的库又会有些兼容问题。

    那么在这两难境地该如何选择呢?是双向奔赴还是各退一步呢?当然是选择它,它功能全面,完美兼容;它,小巧精致,内容丰富;它,万千宠爱,上手简单。它就是uni-app的民间库——uni=simple-router

    uni-simple-router教程在这,因为是基于uniapp开发,所以不用在乎兼容问题,同时可以如同Vue2一般写路由,写路由守卫,但是这并不代表不需要编辑pages.json了,router文件中的路由需要和pages.json中的路由同步。

    所以这个库相当于是提供了一个和Vue原生一样的路由守卫跳转页面获取参数的方法。

// index
this.$Router.push({
  name: 'Login',
  params: {
    from: 'index'
  }
})

// login
let from = this.$Route.query.from

tips: 这里注意,并非是写错,确实是R要大写,this.$Router, this.$Route

并且uni-simple-router自2.0.0起,传递参数有所区别,如果是常规的基础类型url格式不变

url/router?id=1

而携带参数如果是引用类型时会自动编码

url/router?query=%7B"status"%3Atrue,"list"%3A%5B%7B"id"%3A1%7D%5D%7D

this.$Route.query;

返回值:// {status:true, list: "{id: 1}"} 这里的list因为是引用类型自动编码,获取到之后需要解码