uni-app页面跳转

uni-app页面跳转有多种方式。

uni-app内部跳转

页面跳转前提

路由API的目标页面必须是在pages.json里注册的vue页面。

页面跳转方法

uni.navigateTo

最常用的一种方法，用于跳转到非tab页，即不是导航页。
uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面。
OBJECT参数说明：url，String类型，需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。
1.直接跳转

	addSentence(){
		uni.navigateTo({
			url:"/pages/add/addSentence"
		})
	}

注意：跳转的url必须以“/”开头，以上例为例，该路径对应的页面在page.json文件中配置如下：

		{
		    "path" : "pages/add/addSentence",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "添加句子",
		        "enablePullDownRefresh": false,
				"navigationStyle":"custom"
		    }
		    
		}

如果这种情况没有以“/”开头，真正的跳转路径就不是我们指定的路径。
2.携带参数跳转
示例：携带一个参数，跳转的页面在onLoad方法中接收参数。
当前页面：

		// 编辑句子
		editSentence(sentence){
			uni.navigateTo({
				url:"/pages/add/addSentence?id="+sentence.id
			})
		},

跳转到的页面：

<script>
	export default {
		data() {
			return {
	
			}
		},
		onLoad(options) {
			console.log("options接收参数：", options.id);
		},
		methods: {
			
		}
	}
</script>

示例：携带两个参数

	gotoSevenDayNoCertificateStatistic(selectAreaCode, pageType){
		uni.navigateTo({
			url: '/pagesForIssueCer/statistic/noCertList?selectAreaCode='+ selectAreaCode+ '&pageType='+ pageType
		});
	},

3.返回
在跳转到的页面使用uni.navigateBack可以返回到原页面。

	back(){
		uni.navigateBack();
	},

uni.switchTab

uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
从首页跳转到我的页面：

uni.switchTab({
	url: '/pages/me/me',
});

uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面
uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面
uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面

调试

如果页面跳转错误，可以使用如下方法，查看跳转的真实页面路径：

uni.navigateTo({
    url: "/pages/search/search",
    fail (error) {
        console.log(error)
    }
})

如图：