uniapp自定义tabbar与路由拦截

一. 自定义tabbar

1. 隐藏原生tabbar

onLaunch: function() {
		uni.hideTabBar();
},

2. 自定义tabbar组件, 然后固定在底部, 每个tabbar页面引入

//这里直接使用的uview中的tabbar组件, 对于value的值, 由于每个tabbar组件中都需要引入, 所以这个切换的样式, 要么value的值在vuex中共享, 要么直接在tabbar页面props传入
<template>
	<view>
		<u-tabbar
			:value="value"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item
				:text="item.text"
				:name="item.index"
				v-for="(item, index) in list"
				:key="index"
				@click="tabChange(item.index)"
			>
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:src="item.selectedIconPath"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="item.iconPath"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
export default {
	name: 'my-tabbar',
	props: ['value'],
	data() {
		return {
			list: [
				{
					index: 0,
					pagePath: '/pages/index/index',
					text: '主页',
					iconPath: '/static/logo.png',
					selectedIconPath: '/static/404.png'
				},
				{
					index: 1,
					pagePath: '/pages/list/list',
					text: '分页1',
					iconPath: '/static/logo.png',
					selectedIconPath: '/static/404.png'
				},
				{
					index: 2,
					pagePath: '/pages/my/my',
					text: '我的',
					iconPath: '/static/logo.png',
					selectedIconPath: '/static/404.png'
				}
			]
		};
	},
	methods: {
		tabChange(name) {
			uni.switchTab({
				url: this.list[name].pagePath
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon {
	width: 20px;
	height: 20px;
}
</style>

3. 使用

//value 是进入页面后默认选中的值
<TabBar :value="1"></myTabBar>

二. 路由拦截

• 通过uni.addInterceptor拦截
• 该方法对于app是可以直接拦截tabbar的跳转的, 对于微信小程序不可以, 需要自定义tabbar

封装auth.js拦截

//创建一个js文件
const whiteList = [
	'/pages/my/my'
]

export function routingIntercept() {
	// 拦截的跳转方式
	const list = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab']
	list.forEach(item => {
		uni.addInterceptor(item, {
			//拦截前触发,返回true则继续执行, 返回false则终止
			invoke(e) {
            //***************以下写拦截后的逻辑 **********************
				let url = e.url.split("?")[0]//获取url地址
				if (whiteList.indexOf(url) > -1) { //是否需要权限
					  if (!uni.getStorageSync('token')) {  //无token则跳去登录
							uni.navigateTo({ 
								url: "/pages/login/login?redirect=" +
									url
							})

						return false
					} else {
						return true
					}
				} else { //不需要权限的页面
					return true
				}

			},
			// 失败回调拦截
			fail(err) {
				console.log(err)
			}
		})

	})
}

执行拦截

import { routingIntercept } from './utils/auth.js';
onLaunch: function() {
	// 路由拦截
	routingIntercept();
	// 隐藏tabbar
	uni.hideTabBar();
},