小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
玛卡巴卡啦啦啦
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因为是引用类型自动编码,获取到之后需要解码