在實踐運用中，經常需要在路由跳轉時判斷是否需要登入許可權，頁面跳轉時，新增加在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