小程序跳转页面的时候经常会遇到判断是否登录，未登录跳转登录页的需求。基于此需求，做了一个路由操作拦截跳转的jump组件
自定义组件
组件代码非常简单
在根目录创建components目录
在components目录新建jump目录
在jump目录新建四个文件
index.js
index.json
index.wxml
index.wxss文章来源：https://www.toymoban.com/news/detail-492503.html
index.js内容
//引入不需要登录的path路径
//routerConfig.js的内容如下
/*
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
}
},
/**
* 组件的初始数据
*/
data: {},
methods: {
route: function () {
this.jump()
},
jump: function () {
let token = wx.getStorageSync('token')
let url = this.data.url
let type = this.data.type
//url是否跳转的tabbar页面，可以自行书写判断代码，如果是type = 'switchTab';否则就自行传递type的值为switchTab;
//type类型有navigateTo（默认）、redirectTo、switchTab、reLaunch、navigateBack
//delta参数只有后退才用得着，后台层数。
var n_url_index = url.lastIndexOf("\?");
var n_url = url.substring(0, n_url_index);
//登录权限验证
if (!noLoginPath.includes(n_url) && !token) {
//跳转登陆页
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文件内容
{
"component": true,
"usingComponents": {
}
}
index.html文件内容
<view catchtap="route" url="{{url}}" type="{{type}}" delta="{{delta}}"><slot /></view>
index.wxss文件内容
这个样式文件内容空就行文章来源地址https://www.toymoban.com/news/detail-492503.html
使用方法
<jump class="item" url="/pages/product/show">我要跳转了！</jump>
<jump class="item" url="/pages/index/index" type="switchTab">我要去tabbar页面</jump>
到了这里，关于微信小程序 跳转页面经常会遇到判断是否登录情况。基于此需求，做了一个路由跳转拦截的jump组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
