机遇屋-uniapp路由跳转实现全解

uniapp路由跳转实现全解

作者：ych

### 主要跳转方法
1.uni.navigateTo：打开新页面，并保留当前页面在栈中，可以通过返回操作回到上一个页面。
```
uni.navigateTo({
  url: '/pages/example/example',
  fail(err) {
  console.error('Navigation failed:', err);
  }
});
```
2.uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。
```
uni.redirectTo({
  url: '/pages/example/example',
  fail(err) {
  console.error('Navigation failed:', err);
  }
});
```
3.uni.reLaunch：关闭所有页面，打开到应用内的某个页面。
```
uni.reLaunch({
  url: '/pages/example/example',
  fail(err) {
  console.error('Navigation failed:', err);
  }
});
```
4.uni.switchTab：跳转到 tabBar 页面，并关闭其他非 tabBar 页面。
```
uni.switchTab({
  url: '/pages/tabBar/example',
  fail(err) {
  console.error('Navigation failed:', err);
  }
});
```
5.uni.navigateBack：返回上一页或多级页面。
```
uni.navigateBack();
```

### 跳转外部链接
#### 关联模拟点击跳转
1.跳转页面设计
/pages/redirect/index.vue
```
<template>
  <view>
    <a ref="myLink" :href="authUrl"></a>
  </view>
</template>

// 拼接授权链接
    this.authUrl = url;

this.$nextTick(() => {
    this.$refs.myLink.click();
    });

}
}

</script>
```
2.页面调用
```
uni.navigateTo({
    url: '/pages/redirect/index',
    fail(err) {
        console.error('Navigation failed:', err);
    }
    });
```
#### 无参数web-view跳转
1.页面设计
/pages/common/webview.vue
```
<template>
  <view>
    <web-view :src="externalUrl"></web-view>
  </view>
</template>

2.跳转调用
```
goUrl(item) {
		let typelink=item["typelink"];
		console.log(url)
		if(typelink==1){
			url='/pages/common/webview?url='+item["optionlink"];
			uni.navigateTo({
			          url:url ,
			fail(err) {
			  console.error('Navigation failed:', err);
			}
			        });
		}
		if(typelink==2){{
			uni.switchTab({
			          url:url,
			success(res) {
			},
			fail(err) {
			  console.error('Navigation failed:', err);
			}
			        });
		}
		if(typelink==3){{
			uni.navigateTo({
			          url:url,
			success(res) {
			},
			fail(err) {
			  console.error('Navigation failed:', err);
			}
			        });
		}
    }
```

### 当前页刷新
建议直接更新数据。

也可以是使用`uni.reLaunch`
```
// 刷新当前页面
    refreshCurrentPage() {
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        uni.reLaunch({
            url: '/' + currentPage.route,
            fail(err) {
                console.error('Navigation failed:', err);
            }
        });
    },
```
我们使用`uni.reLaunch`方法重新加载当前页面，并在成功加载后执行`onLoad`生命周期钩子函数来触发页面的刷新逻辑。需要注意的是，在`reLaunch`过程中会把当前页和栈内所有页面全部销毁掉，然后重新加载当前页，会比较耗费性能，建议仅在必要时使用。

评论区

先去登录

uniapp路由跳转实现全解

相关推荐

评论区