學習筆記 （5） uni-app 中的導航跳轉

uni中的導航跳轉

利用navigator進行跳轉

跳轉到普通頁面

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳轉到關於頁面</button>
</navigator>

跳轉到tabbar頁面

<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳轉到message頁面</button>
</navigator>

編程式導航進行跳轉

navigateTo進行導航跳轉

保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。

<button type="primary" @click="goAbout">跳轉到關於頁面</button>

通過navigateTo方法進行跳轉到普通頁面

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

通過switchTab跳轉到tabbar頁面

跳轉到tabbar頁面

<button type="primary" @click="goMessage">跳轉到message頁面</button>

通過switchTab方法進行跳轉

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

redirectTo進行跳轉

關閉當前頁面，跳轉到應用內的某個頁面。

<!-- template -->
<button type="primary" @click="goMessage">跳轉到message頁面</button>
<!-- js -->
goMessage () {
  uni.redirectTo({
    url: '/pages/message/message'
  })
}

通過onUnload測試當前組件確實卸載

onUnload () {
  console.log('組件卸載了')
}

導航跳轉傳遞參數

在導航進行跳轉到下一個頁面的同時，可以給下一個頁面傳遞相應的參數，接收參數的頁面可以通過onLoad生命週期進行接收

傳遞參數的頁面

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

接收參數的頁面

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