# uni中的导航跳转
# 利用navigator进行跳转
navigator详细文档：文档地址 (opens new window)
跳转到普通页面
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
1
2
3
2
3
跳转到tabbar页面
<navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
1
2
3
2
3
# 利用编程式导航进行跳转
利用navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
<button type="primary" @click="goAbout">跳转到关于页面</button>
1
通过navigateTo方法进行跳转到普通页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
1
2
3
4
5
2
3
4
5
通过switchTab跳转到tabbar页面
跳转到tabbar页面
<button type="primary" @click="goMessage">跳转到message页面</button>
1
通过switchTab方法进行跳转
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
1
2
3
4
5
2
3
4
5
redirectTo进行跳转
关闭当前页面，跳转到应用内的某个页面。
<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
通过onUnload测试当前组件确实卸载
onUnload () {
console.log('组件卸载了')
}
1
2
3
2
3
# 导航跳转传递参数
在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
1
2
3
4
5
2
3
4
5
接收参数的页面
<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
1
2
3
4
5
6
7
2
3
4
5
6
7