小程序跳轉(zhuǎn)頁面的時候經(jīng)常會遇到判斷是否登錄，未登錄跳轉(zhuǎn)登錄頁的需求?；诖诵枨?，做了一個路由操作攔截跳轉(zhuǎn)的jump組件

自定義組件

組件代碼非常簡單
在根目錄創(chuàng)建components目錄
在components目錄新建jump目錄
在jump目錄新建四個文件
index.js
index.json
index.wxml
index.wxss

index.js內(nèi)容

//引入不需要登錄的path路徑
//routerConfig.js的內(nèi)容如下
/*
const noLoginPath = [
    '/pages/index/index',
    '/pages/article/list',
    '/pages/article/list'
]
module.exports = {
    noLoginPath: noLoginPath
}
*/
import {
    noLoginPath
} from '../../router/routerConfig.js';
Component({
    properties: {
        url: {
            type: String,
            value: ''
        },
        type: {
            type: String,
            value: 'navigateTo'
        },
        delta: {
            type: Number,
            value: 1
        }
    },

    /**
     * 組件的初始數(shù)據(jù)
     */
    data: {},
    methods: {
        route: function () {
            this.jump()
        },
        jump: function () {
            let token = wx.getStorageSync('token')
            let url = this.data.url
            let type = this.data.type
            //url是否跳轉(zhuǎn)的tabbar頁面，可以自行書寫判斷代碼，如果是type = 'switchTab';否則就自行傳遞type的值為switchTab;
            //type類型有navigateTo（默認(rèn)）、redirectTo、switchTab、reLaunch、navigateBack
            //delta參數(shù)只有后退才用得著，后臺層數(shù)。
            var n_url_index = url.lastIndexOf("\?");
            var n_url = url.substring(0, n_url_index);
            //登錄權(quán)限驗證
            if (!noLoginPath.includes(n_url) && !token) {
                //跳轉(zhuǎn)登陸頁
                wx.navigateTo({
                    url: '/pages/user/login'
                })
                return
            }
            if (type == 'navigateTo') {
                wx.navigateTo({
                    url: url
                })
            } else if (type == 'redirectTo') {
                wx.redirectTo({
                    url: url
                })
            } else if (type == 'switchTab') {
                wx.switchTab({
                    url: url
                })
            } else if (type == 'reLaunch') {
                wx.reLaunch({
                    url: url
                })
            } else if (type == 'navigateBack') {
                wx.navigateBack({
                    delta: this.data.delta
                })
            }
        }
    }
})

index.json文件內(nèi)容

{
    "component": true,
    "usingComponents": {
    }
}

index.html文件內(nèi)容

<view catchtap="route" url="{{url}}" type="{{type}}" delta="{{delta}}"><slot /></view>

index.wxss文件內(nèi)容

這個樣式文件內(nèi)容空就行文章來源地址http://www.zghlxwxcb.cn/news/detail-492503.html

使用方法

<jump class="item" url="/pages/product/show">我要跳轉(zhuǎn)了！</jump>
<jump class="item" url="/pages/index/index" type="switchTab">我要去tabbar頁面</jump>

到了這里，關(guān)于微信小程序 跳轉(zhuǎn)頁面經(jīng)常會遇到判斷是否登錄情況。基于此需求，做了一個路由跳轉(zhuǎn)攔截的jump組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！