uniapp的路由库

陆先森

说明

• Vue2有个Vue-router，uniapp参考了VX的小程序设计有个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因为是引用类型自动编码，获取到之后需要解码