uniapp 几种导航跳转与传参

声明式跳转 利用组件进行跳转

利用navigator进行跳转

navigator详细文档：文档地址

跳转到普通页面

<!-- 跳转到普通页面 有返回键-->
<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>

跳转到tabbar页面

<!-- 跳转到tabbar页面 无返回键 关闭所有非tabelbar页面-->
<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>

编程式跳转 利用api跳转

通过navigateTo方法进行跳转到普通页面

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

通过switchTab跳转到tabbar页面 (无返回键 关闭所有非tabelbar页面)

跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

 通过redirectTo方法进行跳转到普通页面  并且关闭当前页面

<button type="primary" @click="goMessagesss">跳转到message页面</button>

goMessagesss () {
			  uni.redirectTo({
			  	url: '/pages/login/login'
			  })
			}

通过onUnload测试当前组件确实卸载

onUnload () {
  console.log('组件卸载了')
}

导航跳转 传递参数 接收参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

声明式跳转传参

<navigator url="/pages/login/login?id=80&age=19" hover-class="navigator-hover">
		  <button type="default">跳转到login页面</button>
</navigator>

 编程式跳转传参

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}

 接收参数的页面

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