uni-app 路由封装（简易版）

Posted 2022-03-01 虚乄

在实践运用中，经常需要在路由跳转时判断是否需要登录权限，页面跳转时，添加加在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>

 

本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/15938794.html