router中获取vuex_uniapp实现$router

作为 Vue 重度用户，在使用 uni-app 过程中不可避免的把 Vue 开发习惯带了过去。无论是项目目录结构，还是命名风格，甚至我还封装了一些库，如 https://zhuanlan.zhihu.com/p/141451626 提到的 _request 等。

众所周知，用 Vue 开发项目，其实就是用的 Vue 全家桶。即 Vue + Vuex + VueRouter 。在代码里的体现就是：

this 

然而由于 uni-app 为了保证跨端同时简化语法，用的是微信小程序那套 API。其中就包括路由系统。因为在 uni-app 中，没有 $router/$route。只有 uni[‘路由方法’]。讲真的，这样做确实很容易上手，但同时也是有许多问题：

1. 路由传参数只支持字符串，对象参数需要手动JSON序列化
2. 传参有长度限制
3. 传参不支持特殊符号如 url
4. 不支持路由拦截和监听

因此，需要一个工具来将现有的路由使用方式变为 vue-router 的语法，并且完美解决以上几个问题。

vue-router 的语法这里不再赘述。简单的来说就是将路由的用法由：

uni

变成：

this

同时传参通过一个 $route 对象。因此我们的需求就是事现一个 $router 和 $route 对象。并给定相应方法。比如调用：

push

其实就是执行了：

uni

实现起来非常简单：

push 方法接收到 '/login' 将其拼接为 `../login/login` 后调用 uni.navigateTo 就可以。

然而这样并不严谨。此时的 push 方法只能在页面内使用。而不能在 pages 文件夹以外的地方使用，因为这里用的是相对路径。只要改成 `pages/login/login` 就好。

$route 的实现就是在路由发生变化时，动态改变一个公共对象 route 的内部值。

而通过全局 mixin onShow 方法，可以实现对路由变化动态监听。

通过 require.context 预引入路由列表实现更好的错误提示。

最后通过一个页面堆栈数据列表实现 route 实时更新。

最后的代码：

import 

_router - DCloud 插件市场​ext.dcloud.net.cn

https://github.com/yinchengnuo/uni_router​github.com