Nacho Portmanteau Meltdown

    uniapp-route-guards

    1.0.7 • Public • Published

    route-guards

    logo

    路由守卫

    一个简单而又不失优雅的uniapp路由守卫

    介绍

    uniapp 中模拟并实现对应 vue-router 的部分 Api 的功能

    平台差异说明

    App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ 小程序 360 小程序
    Android

    如何安装

    您可以使用 Yarn 或 npm 安装该软件包(选择一个)

    yarn

    yarn add uniapp-route-guards

    npm

    npm install uniapp-route-guards --save

    插件注册

    // main.js
     
    import Vue from 'vue';
    import UniRouteGuards from 'uniapp-route-guards';
     
    Vue.use(UniRouteGuards);

    全局前置守卫

    // main.js
     
    const guard = new UniRouteGuards();
     
    // 自定义路由拦截白名单
    const WHILE_LIST = ['/src/pages/home', '/src/pages/log'];
     
    // 跳过路由白名单拦截
    guard.beforeEach((to, from, next) => {
        if (WHILE_LIST.includes(from.url)) {
            return next(to.url);
        }
     
        next();
    });
     
    // 拦截 调用 uni.switchTab 页面C并跳转到 页面D
    guard.beforeEach((to, from, next) => {
        console.log('\n');
        console.log('=================');
        console.log('guard.beforeEach');
        console.log('to: ', to);
        console.log('from: ', from);
        console.log('=================');
        console.log('\n');
     
        if (to.action === 'switchTab' && to.url === '/src/pages/c') {
            return next({
                url: '/src/pages/d',
                action: 'navigateTo'
            });
        }
     
        next();
    });

    全局后置后卫

    guard.afterEach((to, from) => {
        console.log('\n');
        console.log('=================');
        console.log('guard.afterEach');
        console.log('to: ', to);
        console.log('from: ', from);
        console.log('=================');
        console.log('\n');
    });

    路由运行出时调用的守卫

    // 注册 路由守卫出现异常回调的钩子
    guard.onError((errMsg) => {
        console.error('route-guards error: ' + errMsg);
    });

    如何跳转路由并触发注册的守卫

    路由跳转的使用方法和 uniapp 路由跳转一样的

    // 例如
    uni.navigateTo({
        url: '/pages/a'
    });
    uni.redirectTo({
        url: '/pages/a'
    });
    uni.reLaunch({
        url: '/pages/a'
    });
    uni.switchTab({
        url: '/pages/a'
    });
    uni.navigateBack();

    取消对某个路由方法进行拦截

    例如调用某个路由方法时并取消路由拦截

    uni.navigateTo(
        {
            url: '/pages/a',
            success() {
                console.log('is success');
            },
            fail() {
                console.error('is fail');
            }
        },
        false
    );
     
    // 或
    uni.navigateBack(null, false);

    解析运行流程

    • 调用全局的 beforeEach 守卫
    • 路由跳转
    • 调用全局的 afterEach 守卫

    暂时不支持的操作

    1.在拦截器中访问 vm

    // 例如:
    guard.beforeEach((to, from, next) => {
        next((vm) => {
            // 通过 `vm` 访问组件实例
        });
    });

    2.拦截原生的 tabbar

    3.拦截原生的 navBarback

    Api

    Event

    参数名称 类型 默认值 是否必填 说明
    beforeEach Function - false 注册一个回调,在路由跳转之前运行
    afterEach Function - false 注册一个回调,在路由跳转之后运行
    onError Function - false 注册一个回调,该回调会在路由导航过程中出错时被调用

    预览

    Install

    npm i uniapp-route-guards

    DownloadsWeekly Downloads

    10

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    18 kB

    Total Files

    4

    Last publish

    Collaborators

    • fty2460392754