Luo-u-router NPM

Luo-U-Router

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

Install

npm install luo-u-router -S

Usage

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

路由拦截

/**
* 前置路由拦截
* @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);
});

路由对象获取

/**
* 跳转后可通过this.$route获取路由信息
*/

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

示例

/**
* 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配置示例

/**
* 配置好使用时要解析成一维数组并且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": "个人"
			}
	  ]
  },
}

方法

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