silurianyang / uni-simple-router

A simple, lightweight 'uni-app' routing plugin

uni-simple-router

一个更为简洁的Vue-router，专为 uni-app 量身打造

V3 版本

如果你正在使用 vue3 + vite 请参考 uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭，或者查看 官方文档

介绍

uni-simple-router 是专为 uni-app 打造的路由器。它与 uni-app 核心深度集成，让 uni-app 构建单页应用程序变得轻而易举。功能包括：

• H5端 能完全使用 vue-router 进行开发。

• 模块化，基于组件的路由器配置。

• 路由参数，查询，通配符。

• H5端 查看由 uni-simple-router 过渡系统提供动力的过渡效果。

• 更细粒度的导航控制。

• H端自动控制活动的CSS类链接。

• 通配小程序端、APP端、H5端。

开始使用 查看文档，或 使用示例（请参见下面的示例）。

问题

在提交问题的之前，请确保阅读 “问题报告清单” 。不符合准则的问题可能会立即被解决。

贡献

提出拉取请求之前，请务必先阅读 查看文档（请参见下面的示例）。。

变更日志

发行说明 中记录了每个发行版的详细信息更改。

特别感谢

特别感谢 markrgba 一直以来对文档和相关测试的维护。

技术交流

uni-simple-router's Issues

您好，h5端通过链接直接进入页面不会走守卫钩子

我看uni社区上也出现类似的问题，用测试demo跑也不会走。另外就是在在H5端浏览器的后退、前进事件也不会触发路由钩子，不知道大佬有没有考虑也加上和vue-router一样

我想要一个当前页面的路由信息

我想要一个当前页面的路由信息，
在$Router中。

[1.3.6] H5 history模式下，encodeURI为true时会丢失请求参数

Describe the bug
H5 history模式下，encodeURI为true时会丢失请求参数

To Reproduce
Steps to reproduce the behavior:

1. 路由文件配置 encodeURI: true
2. 多次刷新带参数页面

Screenshots

在beforeEach中query参数为空

使用全局钩子得时候，跳转到登录页，参数带不过去

其实就是想登录完成后跳转回之前拦截得页面和参数，

比如从商品详情进入确认订单页，没登录，跳转登录，登录后回到确认订单页

IE 浏览器下：Unhandled promise rejection TypeError: 对象不支持“assign”属性或方法

IE 浏览器下
仿真 IE 11 的报错：
Unhandled promise rejection TypeError: 对象不支持“assign”属性或方法

1.3.7版本打包后H5存在异常

模式：跨平台模式；
平台：h5；
环境：线上环境（也就是打包后）；
测试地址：test.markrgba.cn；
异常表现：
1、aliasPath失效，首页必须输入全路径才可进入
2、即使全路径能进入，点击刷新又出现页面载入不了的情况
3、编程式导航name跳转无法正确匹配路由，总是跳转到路径'/'

暂时这么多

安卓模拟器 或者真机，路由跳转导航钩子被重复调用

import Vue from 'vue'
import Router from 'uni-simple-router'
Vue.use(Router)

const router = new Router({
	routes: [{
		name: "index",
		path: "/pages/index/index"
	}, {
		name: "search",
		path: "/pages/HM-search/HM-search"
	}]
})
router.beforeEach((to, from, next) => {
	console.log("从哪里来" + from.name);
	console.log("到哪里去:" + to.name);
	next();

})
export default router

17:49:56.778 从哪里来index at router.js:15
17:49:56.799 到哪里去:search at router.js:16
17:49:56.861 从哪里来search at router.js:15
17:49:56.881 到哪里去:search at router.js:16

会重复调用一次

微信H5中，安卓tabbar进入子页面返回重新刷新问题

在安卓真机微信网页中，例子首页点击去路由页1，再按返回键后，会重新刷新一下。
小米6、三星（其他机型没试过）微信网页会
ios和第三方浏览器不会
用的官方例子如图：

在nvue页面无法使用

建议改回原来1.2.5以前的query路径，毕竟H5的URL是可以自己添加参数的，1.2.5之后直接添加URL参数变得不方便了，深层参数的传参应该由使用者自行转换

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

app 真机调试报错 : 'query' of undefined

version 1.2.5
uniapp 2.3.3
附图

H5版路由守卫未能和window.location同步

Describe the bug
由于微信的BUG，SPA/HISTOR/H5在微信浏览器“复制链接”/“在浏览器中打开“，链接错误。解决办法：https://www.cnblogs.com/wisewrong/p/9689897.html
但uni-simple-router的路由守卫beforeEach/afterEach在生命周期中的时机似不正确，window.location.replace()或window.location.href=xxx所作的URL变更，未能同步到uni-simple-router组件的Router/Route中，导致该解决办法陷入无限刷新；因而uni-simple-router组件无法绕过微信浏览器BUG，不能在微信浏览器中使用。

在history模式下，刷新非tabbar页面，都会跳转到首页，并且首页刷新两次才出现

Describe the bug
在history模式下，刷新非tabbar页面，都会跳转到首页，并且首页刷新两次才出现
用的this.Router.push()跳转路由

APP最多只能跳转2级页面，之后无论如何也无效，也没有报错信息，H5正常

uni-simple-router 版本 1.3.81

路由配置

换回原生（uni.navigateTo）是好的

Cannot read property 'url' of undefined

用vue cli 初始化项目试过，也用hx初始化项目试过，都出现这个错误

代码

HBuilder X编译运行小程序根目录会生成很多js文件

Describe the bug
使用HBuilder X编译运行uni-simple-router/example项目和自己的项目，编译后的微信小程序根目录会有很多页面js文件，每个页面一个js文件，手动删除所有多余的js，然后点击微信开发者工具的【编译】按钮也会生成一个js文件，是我配置有问题吗？

Screenshots

Desktop (please complete the following information):

• HBuilder X 2.4.6.20191210
• 微信开发者工具 Stable v1.02.1911180

mixin混入不支持onLauch及onLoad

大佬，您好，我自己简单测试了一下，uni-app使用vue-mixin时貌似只支持vue原生生命周期以及相对应的页面生命周期，如onshow；所以在应用启动时，你混入的onLaunch及onLoad生命周期并没有触发，这样就导致无法拦截通过子页面路由地址进入页面的情况

使用uni-simple-router必看注意事项

相关报错指南

大家有啥问题可以直接在下面提出，到时候会统一记录到上面来

1.未实例化直接使用

解决方法

相关测试案例

完整的使用示例

import Vue from 'vue'
import Router from 'uni-simple-router';
Vue.use(Router);
const router = new Router({
	routes: [{
			path: "/pages/tabbar/tabbar-1/tabbar-1",
			name: 'tabbar-1'
		},
	]
});

---

2.未注册路由直接使用

解决方法

你应该在实例化时注册所需路由，否则就会报路由无法找到的问题。譬如当前路径为:http://192.168.1.160:8080/#/pages/tabbar/tabbar-2/tabbar-2 实例化Router时必须注册。注意http://192.168.1.160:8080/#/ 地址呈现这样时，实际为你page.json中第一个路径。你也必须注册！

import Vue from 'vue'
import Router from 'uni-simple-router';
Vue.use(Router);
const router = new Router({
	routes: [{
			path: "/pages/tabbar/tabbar-2/tabbar-2",
			name: 'tabbar-2'
		},
               {
			path: "/pages/tabbar/tabbar-1/tabbar-1",
			name: 'tabbar-1'
		}
	]
});

webView返回路由页面，next失效

在路由页面用h5+的 openWeb 打开了一个http地址。然后返回路由页面，全局路由beforeEach监听到了该路由跳转。然后此时，我调用next 跳转到另一个路由页面，但是无法实现next的跳转功能。

是否可以加上子路由？

在普通的H5页面开发中，经常使用到子路由。子路由的作用是很大的，一些弹出选项类组件需要返回值，由于操作空间的需要，会被作为一个子路由页面来处理（即获得了路由的返回，又可以通过事件给父页面传递值）。
如果将列表选项类组件直接作为弹出框，则没有路由返回功能，体验不佳。（降低原有H5体验）
当然也许可以直接将组件作为新页面路由，通过vuex修改父页面的值，但是既然是组件，如果通过vuex修改值，那么返回数据项就被约定了，所以还是子路由更合适，可以加子路由吗？对小程序有何影响？

H5报红了，是uniapp更新的原因吗？之前没用过

useUniConfig: true不行，同时history模式下安卓手机浏览器打不开，如华为自带

useUniConfig: true不行，同时history模式下安卓手机浏览器打不开，如华为自带

跳转传递参数与实际不一致

测试环境 h5 传一个多层对象的话，会被合并成一个一层对象 结果与传递的不一致

大佬啊，1.1.3有BUG啊，路径传参有错误

如：this.$mRouter.push({path:'/pages/column/main',query: {itemid:id}});
跳转页面后，路径是会变成query={itemid:id}

这个好像不能拦截原生tabbar的切换吧

一个小BUG，H5端 跳转页面 不会改变body 的样式变量

Describe the bug
H5端当跳转到新得页面时候，uni-app修改得body当前页面样式变量不会跟着变化，导致不能使用page来改变当前页面得样式

Expected behavior
希望能和官方跳转一样 body 会叠加一个当前页面样式，这样可以通过本页面page{} 修改样式

Screenshots
使用插件就不正常，使用官方得路由跳转就正常
不改变得情况

正常情况

Additional context
感谢，作者提供本插件

在ios里，好像有一些页面跳转不了啊

求新增【H5路由跳转进度条】样式配置的方法

1、首先在这里感谢作者，这个真的是用过的最好用的uni路由

PS：看了下源码 进度条的配置是写死在h5-dom.js中的，迫于为了以后的更新（不想改源码，不想用!important 强改 ），希望作者能新增这方面的配置方法。

基于typescript 构建的项目，引入该插件报错

希望有一个接口能够更改当前页面this.$Route.query的值

有这样一种场景，
A页面携带参数到B页面,

此时B页面需要更具参数显示对应tab 1，

这时切换B页面tab 2,此时刷新页面,会导致tab切换到tab 1.

Cannot read property 'loadded' of null，Cannot set property 'lastVim' of null

建议增加Es6转Es5的打包，以适配旧机型

Is your feature request related to a problem? Please describe.
因为npm install后HbuilderX打包，项目可以正常跑，但是使用CLI打包，并未对node_modules中的项目进行转换，所以在真机iOS10.2.1上就出现了unexpected token '…' expexted a property name

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

路由beforeEach无法拦截tabbar跳转？

大佬，使用tabbar的pages配置，点击tabbar切换，会出现先跳转tabbar页面1跳转到tabbar页面2成功后，再跳转到其他页面3，无法拦截tabbar的切换。
这个有办法处理？

微信小程序报错 Uncaught ReferenceError: regeneratorRuntime is not defined

import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: "/views/login/login",
      name: 'login'
    }
  ]
})

export default router

import router from './plugins/router'

new App({
  store,
  router
}).$mount()

微信小程序报错
Uncaught ReferenceError: regeneratorRuntime is not defined

从网上搜索，让关掉es6转es5，关掉之后报错

VM318 WAService.js:1 Uncaught TypeError: Cannot read property 'createElement' of undefined
at createElement (h5-dom.js:4)

然后看代码里有 document相关内容，可是微信小程序没有 document，

所以请问 ，这个插件支持微信小程序吗

1.2.2 url会自动添加: query=%7B%7D， 小程序会报错

1.2.2 url会自动添加: query=%7B%7D， 小程序会报错

我按照案例使用导航守卫 安卓真机运行不生效

你好， 我使用案例文档添加导航守卫发现H5 可以正常 安卓调试出现页面不跳转，又没有报错的情况.

请问，最新版的1.3.6 不能进行路由出传参吗？ router.push({ name: name, params: params }) 没有传参过去，url也没有带

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

出现一个问题 demo也有

util.js:80 Uncaught (in promise) TypeError: Cannot read property 'url' of undefined
    at normalizeParams (util.js:80)
    at Object._callee2$ (hooks.js:71)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.<computed> [as next] (runtime.js:114)
    at asyncGeneratorStep (vendor.js:9527)
    at _next (vendor.js:9540)
    at vendor.js:9543
    at new Promise (<anonymous>)
    at Object.<anonymous> (vendor.js:9538)

1.2.2版本h5端不兼容安卓

安卓端微信直接跳转非主页链接，页面一直处于加载中（显示进度条）。
而IOS端和PC端正常显示，安卓模拟器同样正常显示。
感觉应该是新版本加了h5端的链接拦截导致的，在切换回旧版本后则没有此问题。

顺便提一句参数的变化有点大呀，原来都是直接用普通的方式添加URL参数的，现在组装一个地址还要加query=.(直接在浏览器输入的那种，命名路由传参的方式我知道的。。。)

TypeError: Cannot read property '__id__' of undefined

报错“TypeError: Cannot read property '__id__' of undefined”

Describe the bug
报错
TypeError: Cannot read property 'id' of undefined

To Reproduce
Steps to reproduce the behavior:

1. 按照文档部署
2. 报错如图所述，页面直接报错不挂载。
3. 如果屏蔽掉 router/index.js 里的Vue.use(Router)，__id__报错消失

Expected behavior
正常使用

Screenshots

Desktop (please complete the following information):

• OS: Windows10
• Browser 内置浏览器
• Version 最新

使用官方获取定位地址方法会报url未注册问题，路由已注册也不行

调用uni的获取地址方法跳转报URL错误，我按照地址上的路径进行注册 还是报错，不知道怎么解决

使用router-link时候，Cannot read property 'route' of undefined 报错

router/index.js
import Vue from 'vue' import Router from 'uni-simple-router' Vue.use(Router) const router = new Router({ routes: [ { "path": "/pages/my/update_name/main", "name":"my.update_name" }, ..... ] }) .... export default router;

main.js
`import router from './router'
import { RouterMount } from 'uni-simple-router'

import routerLink from '../node_modules/uni-simple-router/component/router-link.vue'
Vue.component('router-link',routerLink)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
// #ifdef H5
RouterMount(app,'#app');
// #endif`

<router-link to="{name:'my.update_name'}" class="weui-cell weui-cell_access" hover-class="weui-cell_active"> <div class="weui-cell__bd">昵称</div> <div class="weui-cell__ft weui-cell__ft_in-access"></div> </router-link>

applets-patch.js:34 Uncaught (in promise) TypeError: Cannot read property 'route' of undefined at queryInfo (applets-patch.js:34) at getRouterNextInfo (util.js:270) at res (concat.js:168) at new Promise (<anonymous>) at concat.js:164 at Vue.d (index.umd.min.js:1) at Array.<anonymous> (index.umd.min.js:1) at concat.js:150 queryInfo @ applets-patch.js:34 getRouterNextInfo @ util.js:270 res @ concat.js:168 (anonymous) @ concat.js:164 d @ index.umd.min.js:1 (anonymous) @ index.umd.min.js:1 (anonymous) @ concat.js:150 async function (async) (anonymous) @ concat.js:148 beforeHooks @ concat.js:147 target.<computed> @ init.js:35 iterator @ vue-router.esm.js:1974 step @ vue-router.esm.js:1741 step @ vue-router.esm.js:1745 runQueue @ vue-router.esm.js:1749 confirmTransition @ vue-router.esm.js:2003 transitionTo @ vue-router.esm.js:1898 push @ vue-router.esm.js:2396 push @ vue-router.esm.js:2693 r @ index.umd.min.js:1 o @ index.umd.min.js:1 (anonymous) @ index.umd.min.js:1 x @ index.umd.min.js:1 (anonymous) @ index.umd.min.js:1 (anonymous) @ index.js:114 _pushTo @ index.js:107 (anonymous) @ index.js:151 (anonymous) @ index.js:150 resolveParams @ hooks.js:139 async function (async) resolveParams @ hooks.js:105 push @ index.js:149 gotoPage @ router-link.vue:76 click @ router-link.vue?d896:11 invokeWithErrorHandling @ vue.runtime.esm.js:1865 invoker @ vue.runtime.esm.js:2190 original._wrapper @ vue.runtime.esm.js:7018 index.umd.min.js:1 [system] TypeError: Reflect.get called on non-object at Object.get (<anonymous>) at completeVim (app-patch.js:3) at Vue.onShow (index.js:361) at invokeWithErrorHandling (vue.runtime.esm.js:1865) at Vue../node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/dist/vue.runtime.esm.js.Vue.__call_hook (vue.runtime.esm.js:8541) at a (index.umd.min.js:1) at Vue.f (index.umd.min.js:1) at invokeWithErrorHandling (vue.runtime.esm.js:1865) at Vue.$emit (vue.runtime.esm.js:3898) at HTMLDocument.<anonymous> (index.umd.min.js:1)

您好，H5端通过链接进去依然会发生不走守卫钩子

您好，H5端通过链接进去依然会发生不走守卫钩子，第一次输入回车地址栏后，进入页面不走守卫钩子，当再次回车地址栏或者刷新的时候，才会进入守卫钩子。

不支持typescript吗

不支持typescript吗

除了返回到顶级页面 其他页面返回不会触发该页面的onUnload生命周期，且上一个页面的onLoad会再次触发

例如：首页到test1页面再到test2页面，然后依次返回首页。返回的过程中，test2页面的onUnload不会触发，且test1的onLoad会再次触发

在h5端，页面刷新之后，使用router.back就不能返回上一个页面了

使用uni-app原生的路由就是有这问题，所以我才找了插件，但是你这个好像还没解决，如何做到和vue-router的back一样呢？

用了1.35版本 H5端 参数不会以？形式在浏览器中

如果使用1.3.5版本 在main.js 里面

//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
RouterMount(app, '#app');
// #endif

// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

那么使用以下代码在H5端 地址栏没有参数，导致如果进入下个页面再次回退 商品详情页就接收不到参数了

this.$Router.push({
	name: 'shop-goods-detail',
	params: {
		id
	}
});

目前只能用 path query方式push跳转

文件./src/helpers/util.js的queryMp方法中Vim可能为undefinde

在小程序触发onShow之后
会触发到uni-simple-router里面的代码
在执行queryMp的时候
Vim可能为undefined

// 推荐将这行
return queryMp(Vim.$parent);
// 改成(瞎写的,有待测试)
return Vim.$parent ? queryMp(Vim.$parent) : Vim;

触发onShow的方法

微信开发者工具版本