router vue 动态改变url_uniapp实现$router

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

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

this + this.$store + this.$router/$route

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

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

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

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

uni.navigateTo({
    
    url: `../login/login?data=${
    JSON.stringify({
     from: 'index', time:Date.now() })}`
})

变成：

this.$router.push('/login', {
    
    data: {
    
        from: 'index',
	time: Date.now()
    }
})

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

push('/login')

其实就是执行了：

uni.navigateTo({
     url:`../login/login