Giter Site home page Giter Site logo

lblblong / tarojs-router-next Goto Github PK

View Code? Open in Web Editor NEW
247.0 4.0 21.0 9 MB

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

Home Page: http://lblblib.gitee.io/tarojs-router-next/

License: MIT License

TypeScript 96.23% JavaScript 2.84% Shell 0.35% CSS 0.58%
router taro tarojs-router react

tarojs-router-next's Issues

Router.back()传参问题

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

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

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

能在taro-vue3中使用吗?

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

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

[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对象,就能有提示啦,这样的路由才是完美的,考虑一下哈

中间件无法拿到data参数

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

路由携带参数丢失问题

复现步骤:
假设有A,B,C三个页面
现在需要从A页面跳转到B页面,但是需要在跳转之前使用'tarojs-router-next'的registerMiddleware做登录验证
如果没登录,则先跳转到C页面完成登录,登录成功后继续从A页面跳转到B页面,这时A页面跳转到B页面携带的参数消失
实例:
image
从岗位列表跳转到岗位详情,需要校验登录,拉起弹出框
image
点击手机号注册登录,完成操作后,跳转到详情页面的jobId消失

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

`
// 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 页面,返回时没有带回来数据

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' })
  }
})

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中的路由配置去自动生成对应的代码,这样可能比较更符合使用中的实际情况,未配置的路由也不使用,也没必要生成路由不是吗。

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

图片

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

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

图片

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

examples/vue3 npm install 报错

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

image

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

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

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

关于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

路由参数丢失问题

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

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"
}
}

页面自检

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

场景:落地页权限自检

使用分包编译不通过

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);

在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

分包设置疑问

屏幕截图 2021-09-09 201043
这样的分包方法,我没有设置name和pagesPath但是好像也生成了方法。
(其实这个样分包,跳转的链接就和放在pages里是一样的。)

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

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.