uni-app之 声明式导航
uni-app之 声明式导航 跳转
跳转到普通页面
<navigator url="../detail/detail">跳转到详情</navigator>
<navigator url="../test/test">跳转到test</navigator>
跳转到 tabbar页面
- 需要添加这个属性：
open-type="switchTab"
<navigator url="../index/index" open-type="switchTab">跳转到首页</navigator>
<navigator url="../about/about" open-type="switchTab">跳转到about</navigator>
open-type 相关值
redirect
- redirect
- 就是关闭当前页面（页面已卸载），然后跳转到url设置的页面，不存在上一个页面 记录
<navigator url="../detail/detail" open-type="redirect">跳转到详情</navigator>
- 效果
uni-app之 声明式导航 传参
url方法传递参数
<template>
<view>
<navigator url="../detail/detail?id=100&name=pink">跳转到详情</navigator>
<!-- <button @click="goDetail">跳转到详情</button>
<button type="default" @click="goDetail2">跳转到详情</button> -->
</view>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
},
}
</script>
- 效果
页面 拿到传递的参数数据
<template>
<view>
<view class="box3">
我是box3 详情
</view>
</view>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
},
onLoad(options){
console.log("页面加载 options",options);
}
}
</script>
- 效果
uni-app之 编程式导航
uni-app之 编程式导航 跳转
uni.navigateTo(OBJECT)
- 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
<template>
<view>
<button @click="goDetail">跳转到详情</button>
</view>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
goDetail(){
uni.navigateTo({
url:"../detail/detail",
animationType: 'pop-in',
})
},
},
}
</script>
uni.switchTab(OBJECT)
- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
<template>
<view>
<view class="box3">
我是box3 详情
</view>
<button type="default" @click="goAbout">跳转到about</button>
</view>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
goAbout(){
uni.switchTab({
url:"../about/about",
})
},
},
onUnload(){
console.log("详情页 卸载");
}
}
</script>
- 从详情页之中，点击跳转到 about，由于about为 tabbar组件的页面，然而详情页非 tabbar，所有会卸载非tabbar的页面
uni.redirectTo(OBJECT)
<template>
<view>
<button type="default" @click="goDetail2">跳转到详情</button>
</view>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
goDetail2(){
uni.redirectTo({
url:"../detail/detail",
})
}
},
onUnload(){
console.log("msg 卸载");
}
}
</script>
- 效果
- 跳转到详情页的时候，当前msg页面会被关闭，也就是卸载了，会触发 onUnload 函数
编程式导航 传参
当前页面，跳转到下一个页面，传递参数值
<template>
<view>
<button @click="goDetail">跳转到详情</button>
</view>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
goDetail(){
uni.navigateTo({
url:"../detail/detail?id=10&name=ppp"
})
}
},
}
</script>
- 效果
跳转到页面后，获取传递的参数
<template>
<view>
<view class="box3">
我是box3 详情
</view>
</view>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
},
onLoad(options){
console.log("页面加载-options", options);
}
}
</script>
- 效果
