uniapp 两个自定义导航栏或按钮 不能多次跳转问题

原因

uni.navigateTo 保留当前页。(不会关闭当前页)跳转到某个页面内。它会进行叠加,在h5与小程序上频繁互跳,就会出现不能跳转问题。

解决

使用 uni.redirectTo可以解决这个问题
uni.redirectTo关闭当前页面,跳转到应用内的某个页面

使用案列

我这里使用的是 uviewui 路由跳转api - uni.$u.route
添加 type属性为 redirect或redirectTo在这里插入图片描述

<template>
	<view class="version">
		<u-navbar title="我的IP" @leftClick="leftClick" fixed placeholder leftIconColor="#000"></u-navbar>
	</view>
</template>

<script>

export default {
      
      
	data() {
      
      
		return {
      
      
			
		};
	},
	onLoad() {
      
      
		
	},
	methods: {
      
      
		
		leftClick() {
      
      
			uni.$u.route({
      
       type: 'redirect', url: '/pages/home/home' });
		},
		
	}
};
</script>

<style lang="scss" scoped>
.version {
      
      
	background: #f9f9f9;
	overflow: hidden;
}
</style>

<template>
	<view class="version">
		<u-navbar title="活动首页" fixed placeholder bgColor="#fff">
			<view class="u-nav-slot" slot="right" @click="toParadise('pages/user/user')"><u-icon name="account-fill" size="24"></u-icon></view>
		</u-navbar>
	</view>
</template>

<script>
export default {
      
      
	data() {
      
      
		return {
      
      
		};
	},
	onLoad(option) {
      
      
	},
	onShow() {
      
      
	},

	methods: {
      
      
		toParadise(prase) {
      
      
			uni.$u.route({
      
       type: 'redirect', url: prase });
		}
	}
};
</script>

<style scoped lang="scss">

</style>

猜你喜欢

转载自blog.csdn.net/qq_43869822/article/details/126739660