uniapp 路由封装（简易版）

在实践运用中，经常需要在路由跳转时判断是否需要登录权限，页面跳转时，添加加在if判断。

插件市场也有一些这种插件，配置也稍微复制，大部分朝向vue-router。

注：本次路由封装，只是单纯的判断是否需要登录权限，其余的暂无考虑。

项目地址：https://gitee.com/jielov/uni-app-tabbar

1.创建js

先在跟目录下的 utils文件夹下创建 routeBlocker.js

routeBlocker.js代码内容

// xuex 数据
import store from '@/store/index.js'

export default function openPage(args) {
    //判断跳转方式是否正确
    if (!['navigateTo', 'switchTab', 'reLaunch', 'redirectTo'].includes(args.type)) {
        console.log("type必须是以下的值[navigateTo,switchTab,reLaunch,redirectTo]");
        return;
    }

    //路由参数
    let url = args.url, //页面路径
        type = args.type, // 跳转方式
        ifLogin = args.login || false; // 是否需要判断登录

    //是否需要判断登录
    if (ifLogin) {
        //根据vuex 判断是否登录
        if (!store.state.hasLodin) {
            uni.showToast({
                title: '请先登录',
                duration: 2000
            });
            setTimeout(() => {
                //登录页面-路径
                url = '/pages/login/login'
                //跳转方法
                // type = 'redirectTo'
                //执行跳转
                startRoute(type, url)
            }, 500)
            return;
        }
    }
    //执行跳转
    startRoute(type, url)
}

//开始跳转
function startRoute(type, url) {
    return new Promise((resolve, reject) => {
        uni[type]({
            url: url,
            success(res) {},
            fail(err) {}
        })
    })
}

2.使用方式

main.js中导入

//导入 路由封装 
import routr from './utils/routeBlocker.js'
//vue2导入
Vue.prototype.$routr = routr
//vue3 导入
//app.config.globalProperties.$routr = routr;　

页面使用

路由传参的话，还是以拼接传过去 ，接收方法不变

vue2 方法

this.$routr({
	url: '/pages/my/my', //页面路径 添加参数 '/pages/my/my?id=1&name=uniapp'
	type: 'navigateTo', //跳转方式 navigateTo,switchTab,reLaunch,redirectTo
	login: true  // 是否需要判断登录
})

vue3方法

<template>
    <view class="content" @click="click">
        路由跳转
    </view>
</template>

<script>
    import {
        getCurrentInstance
    } from 'vue';
    export default {
        setup() {
            //获取上下文实例
            const {
                proxy
            } = getCurrentInstance();
            //开始跳转
            function click(e) {
                proxy.$routr({
                    url: '/pages/my/my', //页面路径 添加参数 '/pages/my/my?id=1&name=uniapp'
                    type: 'navigateTo', //跳转方式 navigateTo,switchTab,reLaunch,redirectTo
                    login: true // 是否需要判断登录
                })
            }
            return {
                click
            }
        }
    }
</script>
<style>
</style>