# luo-u-router

> Route monitoring and operation in uniapp.

Latest version **0.0.21** (published 2021-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install luo-u-router
pnpm add luo-u-router
yarn add luo-u-router
bun add luo-u-router
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.21 |
| Published | 2021-12-26 |
| First published | 2021-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Lihua Luo |
| Maintainers | luo195289 |
| Keywords | luo-u-router, vue-router, uni-simple-router |

## Links

- npm: https://www.npmjs.com/package/luo-u-router
- npm.io page: https://npm.io/package/luo-u-router

## Dependencies (2)

- [qs](https://npm.io/package/qs.md) ^6.10.1
- [vue](https://npm.io/package/vue.md) ^2.6.10

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.0.21 (latest) — 2021-12-26
- 0.0.20 — 2021-12-26
- 0.0.19 — 2021-12-21
- 0.0.18 — 2021-12-20
- 0.0.17 — 2021-12-19
- 0.0.16 — 2021-12-17
- 0.0.15 — 2021-12-17
- 0.0.14 — 2021-12-17
- 0.0.13 — 2021-12-16
- 0.0.12 — 2021-12-15
- 0.0.11 — 2021-12-15
- 0.0.10 — 2021-12-15
- 0.0.9 — 2021-12-15
- 0.0.8 — 2021-12-15
- 0.0.7 — 2021-12-15
- … 6 more at https://npm.io/package/luo-u-router/versions

## README

# Luo-U-Router

> uniapp中的路由监控和操作.
> 原生跳转方法完全兼容
> switchTab点击拦截全兼容
> 后退及系统返回键拦截全兼容
> 性能优越

## Install

```bash
npm install luo-u-router -S
```
## Usage

```js
import Vue from 'vue';
import Router from 'luo-u-router';

let router = new Router({routes: pages});

router.beforeEach((to, from, next) => {
  console.log(to);
  console.log(from);
  // next('/components/TabBarA/index', 'switchTab');
  
  // if (to.path == '/pages/Test/index') {
  //   return next('/pages/Test2/index', 'navigateTo');
  // }

  next();
  // next({path: '/home', query: {dd: 2}});
});

router.afterEach((to, from, redirect, status ) => {
  console.log(to);
  console.log(from);
  console.log(redirect);
  console.log(status);
});

Vue.use(router);

const app = new Vue({
  ...App,
  router
});

app.$mount();

```

# Api

## 路由拦截
```js
/**
* 前置路由拦截
* @param {Object} [to]         目标对象 (navigateType:为跳转类型)
* @param {Object} [from]       来源对象 
* @param {Function} [next]     放行方法   
*                                 （参数1可选[String]或[Object]: {path: '/xxx', query: {xxx: xxx}}）
*                                 （参数2可选[String]navigateType跳转类型, 为空时为默认对应跳转类型}）
* @return {undefined}         
*/
router.beforeEach((to, from, next) => {
  console.log(to);
  console.log(from);
  next();
});

/**
* 后置路由拦截
* @param {Object} [to]          目标对象 (navigateType:为跳转类型，当redirect为空时为undefined)
* @param {Object} [from]        来源对象
* @param {Object} [redirect]    重定向对象（无重定向时为空）
* @param {String} [status]      跳转状态（ok:成功 error:失败 timeout:超时）
* @return {undefined}         
*/
router.afterEach((to, from, redirect, status ) => {
  console.log(to);
  console.log(from);
  console.log(redirect);
  console.log(status);
});

```

## 路由对象获取
```js
/**
* 跳转后可通过this.$route获取路由信息
*/

/**
* 获取参数
*/
this.$route.query  
/**
* 获取元配置
* [isSub]是否是分包路由
* [isTabBar]是否是tabBar页面
* [TBindex]如果为tabBar页面为tabBar页面索引
*/
this.$route.meta      
/**
* 路由全路径
*/
this.$route.fullPath   
/**
* 页面地址
*/
this.$route.path
/**
* 参数
*/
this.$route.query
```


## 示例

```js
/**
* navigateTo跳转 
*/
uni.navigateTo({
  url: '/layouts/Login2/index'
});

uni.navigateTo({
  url: '/layouts/Login2/index?a=1&b=2'
});

/**
* redirectTo跳转 
*/
uni.redirectTo({
  url: '/layouts/Login2/index'
});

uni.redirectTo({
  url: '/layouts/Login2/index?a=1&b=2'
});

/**
* reLaunch跳转 
*/
uni.reLaunch({
  url: '/layouts/Login2/index'
});

uni.reLaunch({
  url: '/layouts/Login2/index?a=1&b=2'
});

/**
* switchTab跳转 
* 可以传参并通过this.$route.query接收参数
*/
uni.switchTab({
  url: '/components/TabBarA/index'
});

uni.switchTab({
  url: '/components/TabBarA/index?xx=777'
});

/**
* 监听switchTab点击并拦截
* 平台全兼容
*/
router.beforeEach((to, from, next) => {
  if (to.navigateType == 'switchTabButton') {
    return next('/home');
  }
  next();
});

/**
* navigateBack跳转 
*/
uni.navigateBack({
  delta: 2
});
/**
* 监听后退及系统返回键并拦截
* 平台全兼容
*/
router.beforeEach((to, from, next) => {
  if (to.navigateType == 'backButton') {
    return next('/home');
  }
  next();
});

```

## pages.json配置示例
```js
/**
* 配置好使用时要解析成一维数组并且path为全路径才能使用
* pages.json和routes要对应，如pages.json有某一路由但解析后的routes里没有则路由跳转时为无效
* routes如果是分包页需要配置meta的isSub为true
* routes如果是tabBar页需要配置meta的isTabBar为true，和meta的TBindex为tabBar索引
*/

{
	"pages": [
		{
			"path": "layouts/Login/index",
			"meta": {"test": "test1"},
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "layouts/Login2/index",
			"meta": {"test": "test1"},
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
	  {
			"path": "components/TabBarA/index"
		},
		{
			"path": "components/TabBarB/index"
		},
		{
			"path": "components/TabBarC/index"
		}
	],
	"subPackages": [
    {
			"root": "pages",
			"pages": [
				{
					"path": "Test/index",
					"meta": {"test": "test2"},
					"style": {
						"navigationBarTitleText": "uni-app"
					}
				},
				{
					"path": "Test2/index",
					"meta": {"test": "test3"},
					"style": {
						"navigationBarTitleText": "uni-app"
					}
				}
			]
		}
	],
	"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
			{
				"pagePath": "components/TabBarA/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "组件"
			}, {
				"pagePath": "components/TabBarB/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "接口"
			},
			{
				"pagePath": "components/TabBarC/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "个人"
			}
	  ]
  },
}
```

## 方法
```js
/**
* await
* 等待是否可以跳转
*/
router.afterEach((to, from, redirect, status ) => {
  if (status === 'no find') {
    router.await(() => {
      uni.redirectTo({url: '/components/Error/index?type=404'});
    });
  }
});

```

# License

This content is released under the [MIT](http://opensource.org/licenses/MIT) License.

---
_Source: https://npm.io/package/luo-u-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._