一、使用 navigator 组件跳转（无参数）

• 跳转 tabbar 页面，必须设置 open-type="switchTab"

 <view>
	<!-- 跳转非 tabbar 页面，有返回按钮 -->
	<navigator url="../detail/detail">跳转详情页</navigator>
	<!-- 跳转至 tabbar 页面 -->
	<navigator url="../message/message" open-type="switchTab">跳转message</navigator>
	<!-- 跳转非 tabbar 页面，无返回按钮 -->
	<navigator url="../detail/detail" open-type="redirect">跳转detail</navigator>
</view>

二. 调用 API 编程式跳转跳转（无参数）

uniapp页面跳转的多个方法 - JS方法
navigateTo, redirectTo 只能打开非 Tab页面，可传参。
switchTab 只能打开Tab页面，不可传参。
reLaunch 可以打开任意页面，可传参。

methods: {
    fn1(){
        //保留当前页面，跳转到应用内的某个页面
        uni.navigateTo({
            url: '/pages/drugs/drugManage'
        })
    },
    fn2(){
        //关闭当前页面，返回上一页面或多级页面。
        uni.navigateBack({
            delta:1
        });
    },
    fn3(){
        //关闭所有页面，打开到应用内的某个页面(可带参数)
        uni.reLaunch({ 
            url:'./home/index' 
        });
    },
    fn3(){
        //关闭当前页面，跳转到应用内的某个页面。
        uni.redirectTo({
            url:'/pages/about/about'
        });
    },
    fn4(){
        //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
        uni.switchTab({
            url: '../tabbor/index/index'
        });
    },
    fn5(){
        //调用第三方程序打开指定的URL
        boid plus.runtime.openURL('https://www.baidu.com/')
    }
}

Uniapp打开外部网页、跳转指定链接
Uniapp打开外部网页、跳转指定链接 （打开app以外的web页面）

    <web-view src="https://baidu.rudon.cn/"></web-view>
    <template>
        <view>
            <web-view src="https://baidu.rudon.cn/"></web-view>
        </view>
    </template>

三. 使用 navigator 组件跳转（传参数）

传值页面

以?分割，?后面为页面所传递的值，多个值之间以&间隔

<view>
    <navigator url="../detail/detail?id=10&name=test">跳转详情页</navigator>
</view>

接收值页面

使用 onLoad 页面生命周期钩子接收传递过来的值

<script>
	export default {
		onLoad(options) {
			console.log(options)
		}
	}
</script>

四. 调用 API 编程式跳转跳转（传参数）

传值页面

以?分割，?后面为页面所传递的值，多个值之间以& 间隔

toDetail() {
	uni.navigateTo({
		url: '../detail/detail?id=10&name=test'
	})
}

接收值页面

使用 onLoad 页面生命周期钩子接收传递过来的值

onLoad(options) {
	console.log(options)
}

通过跳转传值一般套路就是在URL中把需要传的值带过去，然后再接收的页面onLoad函数中，利用参数接回来。

//跳转页面
 
uni.navigateTo({
   url:'页面路径?id=1'
})
 
 
uni.navigateTo({
    url:'/pages/foodDetail/index?foodId='+ JSON.stringify(e),
})

注意：传入键值对的值为对象需要使用JSON.stringify才可以在跳转的页面接收到想要的值， 键值对的值为简单数据可以不用

//接收页面
onLoad: function (option) { 
        //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); 
        //传递的是id=1，则获取到的就是option.id
}

案例： 跳转获取到值再返回给页面

第一个页面

//选择疾病
chooseDrug(){
	uni.navigateTo({
		url:'/pages/chooseDrug?names=drugText&ids=drugId'
	})
},

第二个页面

onLoad(option) {
	if(option?.names){
		this.names=option.names;
	}
	if(option?.ids){
                this.ids=option.ids;
	}
},


methods:{
        //跳转选择疾病
	jumps(data){
		// 获取所有页面栈实例列表
		let pages = getCurrentPages();  
		// 当前页页面实例
		let nowPage = pages[ pages.length - 1]; 
                // 上一页页面实例
		let prevPage = pages[ pages.length - 2 ];  
		// 修改上一页data里面的值
		prevPage.$vm[this.names] = data.drugName;
		prevPage.$vm[this.ids] = data.drugNo;
		// uni.navigateTo跳转的返回，默认1为返回上一级
		uni.navigateBack({  
			 delta: 1
		});
	}
}