uni-app导航跳转
导航（navigator）是个标签
标签跳转
<navigator url="路径"></navigator> //普通跳转只能调到普通页面
<navigator url="/" open-type="switchTab"></navigator> //加上open-type="switchTab" 跳转到tabbar页面
<navigator url="/" open-type="redirect"></navigator> //加上open-type="redirect" 不能跳转到tabbar页面把页面关闭在重新加载没有返回箭头的，而普通跳转有返回箭头
事件方法跳转
<button @click="goDetail">跳转至详情页</button>
methods:{
goDetail(){
//uni.navigateTo({})普通跳转
//uni.switchTab({})跳转tabbar页面关闭其他所有非tabbar页面
//uni.redirectTo({})只关闭当前页面并跳转
uni.navigateTo({
url:"../detail/detail"
})
}
}
路由跳转传参
传值页面
<navigator url="路径后面加上'?id=80&age=19'" open-type="switchTab"></navigator>
接收值页面
//通过onLoad勾子函数里面的第一个形参接收
onLoad(options){
console.log(options) //options={id:80,age:19}
}
事件方法的方式跳转也是直接在地址后面加就可以
uni-app条件注释实现跨端兼容
在标签中的跨端兼容
<!-- #ifdef MP-WEIXIN --> 只在微信小程序显示
<view>1111</view>
<!-- #endif -->
<!-- #ifdef H5 --> 只在H5显示
<view>222</view>
<!-- #endif -->
在js中的跨段兼容
methods:{
onLoad(){
// #ifdef H5
console.log('111')
// #endif
// #ifdef MP-WEIXIN
console.log('121')
// #endif
}
}
在style中的写法
<style>
/* #ifdef MP-WEIXIN */
view{
color: white;
}
/* #endif */
</style>
其实三种写法都是一样的都是先写注释在加上
#ifdef 设备，#endif