(坑)uni-app自定义tabBar加全局拦截

今天在做自定义tabBar组件并且设置点击购物车和我的页面会进行拦截,判断是否登录的时候,出现了main.js中的自定义事件不会触发的情况,经过排查发现应该是事件名用到的关键字,改为navigateGo 之后就可以正常使用了
tabBar代码:

<template>
	<view class="tabbar">
		<view class="tab" v-for="(item,index) in tabbarList" :key="index" @tap="navigateTo(item.pagePath)">
			<image v-if="item.pagePath==currentPage" :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<text class="text">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currentPage:{
				type:String,
				default:'index'
			}
		},
		data (){
			return {
				tabbarList:[
					{
						"pagePath": "index", // 页面路径
						"text": "首页" ,// 按钮文字
						"iconPath":"/static/tabbar/index.png", // 图片路径
						"selectedIconPath":"/static/tabbar/indexselect.png" // 选中时的图片路径
					}, 
					{
						"pagePath": "list",
						"text": "分类",
						"iconPath":"/static/tabbar/list.png", // 图片路径
						"selectedIconPath":"/static/tabbar/listselect.png" // 选中时的图片路径
					}, 
					{
						"pagePath": "shopcart",
						"text": "购物车",
						"iconPath":"/static/tabbar/shop.png", // 图片路径
						"selectedIconPath":"/static/tabbar/shopselect.png" // 选中时的图片路径
					}, 
					{
						"pagePath": "my",
						"text": "我的",
						"iconPath":"/static/tabbar/my.png", // 图片路径
						"selectedIconPath":"/static/tabbar/myselect.png" // 选中时的图片路径
					}
				]
			}
		},
		methods:{
			navigateTo(e){
				
				if (e == 'my' || e == 'shopcart'){
					console.log(e);
					this.navigateGo({
						url:`../../pages/${e}/${e}`
					})
				}else {
					uni.redirectTo({
						url:`../../pages/${e}/${e}`
					})
					
				}
			}
		}
	}
</script>

main.js中全局拦截

// 权限跳转
Vue.prototype.navigateGo = (options)=>{
	console.log(111)
	if( !store.state.user.loginStatus ){
		uni.showToast({
			title:'请先登录',
			icon:'none'
		})
		return uni.navigateTo({
					url:'/pages/login/login'
			   })
	}
	uni.navigateTo(options);
}

你可能感兴趣的:(uni-app学习记录,uni-app,javascript,vue.js)