uniapp 路由跳转的几种方式（包含跳转到外部链接）

Apeng_0919

已于 2023-07-07 10:40:46 修改

阅读量2.8w

点赞数 16

分类专栏： uniapp vue 文章标签： vue.js

于 2021-07-01 17:48:39 首次发布

本文链接：https://blog.csdn.net/weixin_50606255/article/details/118391739

版权

vue 同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

uniapp

33 篇文章 6 订阅

订阅专栏

1.navigateTo（保留当前页面，跳转到其他页面，使用navigateTo可以返回上一页）

uni.navigateTo({
	url:'./straSettings'
});

2.reLaunch（关闭所有页面，跳转到其他页面）

uni.reLaunch({
	url:'./straSettings'
})

3.redirectTo（关闭当前页面，跳转到其他页面）

uni.redirectTo({
	url:'./straSettings'
})

4.switchTab（适用于底部导航栏之间的跳转，或者跳转到底部导航栏）

uni.switchTab({
	url: '../strategy/strategy'
});

5. location.href（适用于跳转到外部链接）

location.href ='https://blog.csdn.net/weixin_50606255/article/details/118391274';

注意：

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转

————————分割线————————

在工作中遇到了当前页面跳转到外部链接的需求，在此记录一下遇到的问题和解决方法：

先贴代码：

1、新建一个webview文件，在page.json里面指向我们跳转的这个内部路径；

2、在webview中写入：

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:''
			}
		},
		onLoad(item) {
		    this.url = decodeURIComponent(item.url)
		    // 传入需要跳转的链接 使用web-view标签进行跳转
		  },
		methods: {
			
		}
	}
</script>

<style>

</style>

3、在需要跳转的页面中应用：

<view class="swiperView">
	<u-swiper :list="bannerList" keyName="img" :autoplay="true" @change="changeBanner" @click="goBanner">
	</u-swiper>
</view>

goBanner(){
	let url = this.bannerList[this.current].url;
	if(url00){
	    uni.navigateTo({
			url: '/pages/home/webview?url=' + url
		})
	}
}

运行到界面发现会报错：

此时只要将webview中的定义的url换个名字就ok了，我在这里将url换成了url11(并不唯一，换成自己明白意思的就行)。报错的原因可能是页面传参有一个固定的url参数，自定义参数时不能与之重名，就像我们在定义一个变量的时候不能用关键字代替一样。

如有问题欢迎多多交流~~