lblblong/tarojs-router-next

Taro 小程序路由库/自动生成带参数类型提示的路由方法/允许传递任意类型、任意大小的参数数据/同步的路由方法调用/koa体验一致的路由中间件

tarojs-router-next

它是一个小巧的 Taro(小程序) 路由库，为你提供以下特性：

• 自动生成带参数类型提示的路由方法
• 允许传递任意类型、任意大小的参数数据
• 同步的路由方法调用
• koa 体验一致的路由中间件

快速开始

使用文档，API 文档

Demo（代码），Demo（微信开发者工具打开）

安装核心依赖

$ npm install --save tarojs-router-next

安装路由方法自动生成插件

$ npm install --dev tarojs-router-next-plugin

在 编译配置(/config/index.js) 的 plugins 字段中引入插件：

const config = {
  plugins: ['tarojs-router-next-plugin'],
}

解决什么问题

1. 路由跳转的页面 url 没有类型提示容易输错
2. 路由传参需要手动拼接参数、无法携带任意类型、任意大小的数据
3. 路由方法是异步的，页面通过 EventChannel 通信，事件的回调方法可读性差、耦合度高、只能在回调内部处理异常
4. 路由跳转的鉴权等实现起来比较麻烦

如何解决

1. 路由跳转的页面 url 没有类型提示容易输错

tarojs-router-next 不需要使用者手写页面 url，它会监听项目 src/pages 内容变化，自动为使用者生成对应的路由方法并附加到 Router 类上，比如以下列子：

左边的页面结构会生成右边的 Router.to** 系列方法，全都挂在 Router 类上

2. 路由传参需要手动拼接参数、无法携带任意类型、任意大小的数据

tarojs-router-next 允许直接传递一个对象给 params，它会把 params 展开拼接到 url 后面。并且还可以接收一个 data 参数，data 可以传递任意类型、任意大小的数据。

3. 路由方法是异步的，页面通过 EventChannel 通信，事件的回调方法可读性差、耦合度高、只能在回调内部处理异常

tarojs-router-next 的路由跳转会返回一个 Promise，可以用 async/await 写出同步代码，详细参考 同步的路由方法

4. 路由跳转的鉴权等实现起来比较麻烦

自己实现路由的鉴权是比较麻烦的事情，而 tarojs-router-next 提供非常易于理解的路由中间件功能，详细参考 路由中间件

平台与框架支持

框架

支持所有 Taro 可支持的框架（React、Vue、Vue3、Nerv）

小程序

理论上支持所有 Taro 可支持的小程序平台，目前已在 微信小程序、QQ小程序、支付宝小程序 测试通过

H5

支持

React Native

暂不支持

友情推荐

Taroify

地址：https://github.com/mallfoundry/taroify

Taroify 是移动端组件库 Vant 的 Taro 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

tarojs-router-next's Issues

页面自检

希望新增一个函数走navigate接口的流程，但不希望走最后的跳转middleware，并且可以把后面的 compose(middlewares)结果返回

场景：落地页权限自检

能在taro-vue3中使用吗？

我在taro-vue3项目中使用, 提示我了一些关于react的报错 1.You might have mismatching versions of React and the renderer (such as React DOM)

back 方法没有页面回退时如何自定义返回页面？

h5 端跳转外部网页后返回，会提示没有页面回退，这个如何解决呢？

Router.back()传参问题

如图所示，在岗位列表页面跳转到岗位详情页面进行关闭或者修改后用户点击左上角返回，如何给Router.back()传入参数 通知上一个页面数据以及发生改变需要更新？？？

`route.config.ts`不支持导入类型？

route.config.ts导入其他类型，编译后会变成any？

Router.navigate()无法实现replace功能

replace没有生效

从上一个页面传过去的data有一定的概率获取不到

windows系统 出现path问题

看代码是因为taro-router-next-plugin的 loadPages方法中的page.page处理问题导致

NavigateType.redirectTo

replace没有生效，请问该怎么处理？

Taro 的navigateTo 的emit

https://nervjs.github.io/taro/docs/apis/route/navigateTo

有时候需要子页面选择一些内容后，弹出，然后给父页面传值，这个功能还是需要用的。

Taro.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function (res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

关于route_key

router_key在一些原本就有参数的跳转场景中，会再在地址后面加"?router_key=xxxx"
如 ”localhost:8080/home?id=1000“ 跳转时有可能发生 ”localhost:8080/home?id=1000?router_key=xxxx“
而不是”localhost:8080/home?id=1000&router_key=xxxx“
而且有可能无限添加”router_key“

请问router_key是否可以提供配置将其隐藏，或者再更新该值的时候检测地址是否携带其他参数或router_key

多层的页面路由无法监听

安装了tarojs-router-next-plugin后编译失败

路由携带参数丢失问题

复现步骤：
假设有A,B,C三个页面
现在需要从A页面跳转到B页面，但是需要在跳转之前使用'tarojs-router-next'的registerMiddleware做登录验证
如果没登录，则先跳转到C页面完成登录，登录成功后继续从A页面跳转到B页面，这时A页面跳转到B页面携带的参数消失
实例：

从岗位列表跳转到岗位详情，需要校验登录，拉起弹出框

点击手机号注册登录，完成操作后，跳转到详情页面的jobId消失

路由中间件似乎对程序启动后加载的第一个页面不生效

大佬你好，我现在的需求就是：小程序进入首页之前就要进行拦截，并判断用户是否登录且有访问权限。因为首页的几个请求已经涉及到要传token了。但是路由中间件对此无效。看了还是通过http请求后的状态码来进行判断并跳转了。

没有用Vue， index.modern.js 里面出现了require Vue

yarn dev:h5 时候报错，找不到vue模块

Uncaught ReferenceError: App is not defined

老哥，感谢开发这么优秀的库，感觉很实用。

import 'tarojs-router-next/register'

在app.tsx中引入后报错

Uncaught ReferenceError: App is not defined
    at eval (register.js?fef1:3)
    at Object../node_modules/tarojs-router-next/register.js (app.js:4988)
    at __webpack_require__ (app.js:64)
    at eval (app.tsx:8)
    at Module../src/app.tsx (app.js:5148)
    at __webpack_require__ (app.js:64)
    at eval (app.config.ts?32f2:1)
    at Module../src/app.config.ts (app.js:5125)
    at __webpack_require__ (app.js:64)
    at Object.0 (app.js:7403)

相关依赖

    "@tarojs/cli": "3.0.8",
    "@tarojs/components": "3.0.8",
    "@tarojs/react": "3.0.8",
    "@tarojs/runtime": "3.0.8",
    "@tarojs/taro": "3.0.8",

最后提一点个人的优化小建议：
基于路由的生成目前是监听pages目录下的一级目录

• 有的时候功能比较多的话会有多级页面，目前无法生成，还有分包也无法自动生成，不知道是否考虑过通过app.config.ts中的路由配置去自动生成对应的代码，这样可能比较更符合使用中的实际情况，未配置的路由也不使用，也没必要生成路由不是吗。

Taro 3x 运行时报错

./node_modules/tarojs-router-next/dist/router/index.js
Module not found: Error: Can't resolve 'src/func/isNil' in 'xxx\node_modules\tarojs-router-next\dist\router'
resolve 'src/func/isNil' in 'E:\Projects\Work\MJK\efms_mini_program_taro\node_modules\tarojs-router-next\dist\router'
  Parsed request is a module
  using description file: xxx\node_modules\tarojs-router-next\package.json (relative path: ./dist/router)

查看代码发现实际导入的应该是 dist 文件夹下 func\isNil 文件，所有路径为 src 的都有这个报错

config/index.js 中我只是按文档引入了 tarojs-router-next-plugin

examples/vue3 npm install 报错

不太懂，希望有人解答一下。在我自己项目按照文档安装出现问题后在example中执行 npm install 也报错。

使用分包编译不通过

Router.home = {
177 | to: to,

178 | : .DSStore,
| ^
179 | function: function (options) { return Router.navigate({ url: "/subpackages/pages/.DS_Store/index" }, options); },
180 | toHome: function (options) { return Router.navigate({ url: "/subpackages/pages/home/index" }, options);

最新版本H5页面跳转不会将上一层页面设置为 display: none; 导致页面堆叠

使用taro.navigateTo 正常

Can't resolve 'src/lib/compose'

版本： 3.1.0
问题描述： Can't resolve 'src/lib/compose'
错误：

ERROR in ./node_modules/tarojs-router-next/dist/middleware/index.js 180:16-42
Module not found: Error: Can't resolve 'src/lib/compose' in 'E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\middleware'
resolve 'src/lib/compose' in 'E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\middleware'
Parsed request is a module
using description file: E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\package.json (relative path: ./dist/middleware)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\middleware\node_modules doesn't exist or is not a directory
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\dist\node_modules doesn't exist or is not a directory
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\tarojs-router-next\node_modules doesn't exist or is not a directory
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\node_modules doesn't exist or is not a directory
looking for modules in E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules
E:\workspace_xuct\xuct-calendar\xut-calendar-vant-weapp\node_modules\src doesn't exist
E:\workspace_xuct\xuct-calendar\node_modules doesn't exist or is not a directory
E:\workspace_xuct\node_modules doesn't exist or is not a directory
E:\node_modules doesn't exist or is not a directory
@ ./node_modules/tarojs-router-next/dist/index.js 20:19-42
@ ./src/pages/aboutus/index.tsx 20:0-40 100:10-30
@ ./src/app.config.ts 343:15-46

taro +taro_ui 最新版本搭配 tarojs-router-next 在VSCODE中类型提示有问题

{
"name": "testA",
"version": "1.0.0",
"private": true,
"description": "dd",
"templateInfo": {
"name": "taro-ui",
"typescript": true,
"css": "less"
},
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
],
"author": "",
"dependencies": {
"@babel/runtime": "^7.7.7",
"@tarojs/cli": "3.2.1",
"@tarojs/components": "3.2.1",
"@tarojs/runtime": "3.2.1",
"@tarojs/taro": "3.2.1",
"lodash": "4.17.15",
"@tarojs/react": "3.2.1",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"taro-ui": "^3.0.0-alpha.3"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/mini-runner": "3.2.1",
"@tarojs/webpack-runner": "3.2.1",
"@types/react": "^17.0.2",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"babel-preset-taro": "3.2.1",
"eslint": "^6.8.0",
"eslint-config-taro": "3.2.1",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^4.2.0",
"stylelint": "9.3.0",
"tarojs-router-next": "^1.3.2",
"typescript": "^4.1.0"
}
}

你有没有taro h5路由切换实现转场动画的思路？

taro封装的太死了，在h5上的路由切换是没有任何转场动画的，就是屏幕闪了下，但是想实现转场动画，发现根本加不上，你有思路吗？

问一个问题

你好，你那个动态的类型是怎么实现的？

该路由库在微信小程序端是否支持当页面栈达到10个时继续打开页面的功能？

该路由库在微信小程序端是否支持当页面栈达到10个时继续打开页面的功能？
类似转转的跳转库，对页面栈进行了一层维护。

请问这个能加动画吗

如题

中间件可否终止路由跳转？

通过中间件做页面权限设置时，如果用户取消授权，可否终止此次路由跳转？

从上一个页面传过去的data有一定的概率获取不到

在Taro v3.0.27及以上版本上报错

在Taro v3.0.26正常，但在升级 3.0.27 及3.1.1后报错

TypeError: _tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default.a.navigateTo is not a function

中间件无法拿到data参数

场景：跳转其他需要权限的页面，中间件拦截了需要去登录页面，但我我未能在中间件或登录页去找到data参数！,是否能将data参数做下处理如同ext一样呢?

如果可以添加解决小程序页面路径最多只能十层限制的方案就更好了

跳转的页面栈越来越多，不知不觉可能就到了十层了 再用navigateTo去跳转就跳不动了

同步的路由方法功能不生效

`
// pages/authCenter/index
Router.back({ a: 'xxxxxx' })

// pages/home/index
const handleToAuthCenter = async (): Promise => {
try {
const data = await Router.toAuthCenter()
console.log('data ==>: ', data)
} catch (error) {
console.warn('error: ', error)
}
}`
跳转至 authCenter 页面，返回时没有带回来数据

back方法可以支持多级返回吗

如题。

taro3.5.2已无法适配

老板什么时候适配3.5.2？

taro h5 端如何实现路由跳转动画？

路由参数丢失问题

小程序处于激活状态，在某个页面不做任何操作，手机息屏或者锁屏解锁后，再通过 Router.getParams() 获取不到 之前的参数

路由中间件无法感知页面返回

如图，我们希望通过一个路由中间件监听路由事件，包括何时打开页面，何时关闭/返回页面。

但比较尴尬的是，当前中间件在await next()之后并不是等待页面被关闭，而是指打开了页面，所以丧失了在中间件中监听路由关闭的能力。

所以，比较符合直觉的是：await next() => 等待当前页面被关闭/返回

是否有考虑支持vue3

taro升级3.4.5时报错

\tarojs-router-next-plugin\dist\router-code-generator\index.js:113
this.ctx.onBuildStart(function () {
^

TypeError: this.ctx.onBuildStart is not a function
at RouterCodeGenerator.listenBuildStart (E:\workspace_xuct\calendar\xuct-calendar-weapp\node_modules\tarojs-router-next-plugin\src\router-code-generator\index.ts:84:14)
at E:\workspace_xuct\calendar\xuct-calendar-weapp\node_modules\tarojs-router-next-plugin\src\index.ts:5:40
at Kernel.initPlugin (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:111:16)
at Kernel.resolvePlugins (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:86:18)
at Kernel.initPresetsAndPlugins (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:74:14)
at Kernel. (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:261:18)
at Generator.next ()
at D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:8:71
at new Promise ()
at __awaiter (D:\Node\node_global\node_modules@tarojs\cli\node_modules@tarojs\service\dist\Kernel.js:4:12)

谁在使用 tarojs-router-next ？

欢迎大家晒出自己的App~

页面通过链接访问的时候不执行中间件，如何解决？

页面通过链接访问的时候不执行中间件，如何解决？

Vue3案例运行错误

底部tabBar配置的跳转，不走中间件对吗，使用 Router.toUser方法可以是这样吗

底部tabBar配置的跳转，不走中间件对吗，使用 Router.toUser方法可以是这样吗

没有路由跳转成功的回调吗

分包设置疑问

这样的分包方法，我没有设置name和pagesPath但是好像也生成了方法。
（其实这个样分包，跳转的链接就和放在pages里是一样的。）

[Feature Request] 针对非一级目录路径提示的设计方案

新增 pages对象，根据页面文件树生成该对象：

const source_pages = [
	{
		name: 'pages',
		type: 'folder',
		children: [
			{
				name: 'page_a',
				type: 'page',
				path: '/pages/page_a',
				children: [
					{
						name: 'page_a_1',
						type: 'page',
						path: '/pages/page_a'
					}
				]
			},
			{
				name: 'page_b',
				type: 'folder'
			},
			{
				name: 'page_c',
				type: 'folder'
			}
		]
	}
]

// 遍历之后转换为

 export const pages = {
	pages: {
		page_a: {
			path: '/pages/page_a',
			page_a_1: '/pages/page_a'
		},
		page_b: {},
		page_c: {}
	}
}

可以直接使用导出的pages对象，就能有提示啦，这样的路由才是完美的，考虑一下哈

路由跳转返回失效 报错 MiniProgramError {errMsg:navigateBack: fail navigateBack intercepted }

有的机型会出现跳转返回卡住，返回不了页面（iPhone XR）
查看日志发现是报错【MiniProgramError {errMsg:navigateBack: fail navigateBack intercepted }】
请问应该怎样解决

版本：
"@tarojs/taro": "3.2.6",
"tarojs-router-next": "^2.2.2",

支持2.0+版本么？

路由中间件只能拦截使用Router类跳转的场景

你好想请教一下：
目前路由中间件只能拦截使用Router类跳转的场景。
当直接访问需要受拦截的页面，拦截并不生效，这其实是没有真正的拦截页面，有什么方式可以做到真正的拦截路由吗？
我想到的可能的方案：

1. taro-router是否有暴露方法能处理渲染前的逻辑
2. 目前我们的项目里实现了一个权限高阶组件，在每个页面根组件引入权限高阶组件包裹页面组件，但是这样的问题是很容易漏掉，在思考有没有办法在编译时自动引入该组件包裹