uni-app导航跳转初始

布满荆棘的人生 2022-12-23 15:25 103阅读 0赞

## 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条件注释实现跨端兼容 ####

在标签中的跨端兼容

只在微信小程序显示
    <view>1111</view>
    
       只在H5显示
    <view>222</view>

在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`

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5跳转小程序，uniapp跳转小程序

网页跳转小程序需要使用微信的开放标签 [wx-open-launch-weapp][] ，使用开放标签需要使用微信的jssdk，然后sdk的版本不能低，低版本点击无效。先给

以你之姓@/ 2023年01月17日 07:48/ 0 赞/ 228 阅读

相关 uni-app导航跳转初始

uni-app导航跳转导航（navigator）是个标签标签跳转 <navigator url="路径"></navigator> //普通跳转只能调

布满荆棘的人生/ 2022年12月23日 15:25/ 0 赞/ 104 阅读

相关 uniapp 页面跳转的坑

uniapp 页面跳转的坑我们在使用 uniapp 的时候，经常使用到页面跳转，uniapp 的几个常用跳转我就不一一列表了。我就说我遇到的坑吧如下图，我要从

川长思鸟来/ 2022年11月20日 05:59/ 0 赞/ 300 阅读

相关 VUE_vue跳转第三方导航软件定位导航

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

素颜马尾好姑娘i/ 2022年10月26日 01:29/ 0 赞/ 226 阅读

相关 uniapp生命周期/路由跳转

应用生命周期（仅可在App.vue中监听）（1）onLaunch ：当uni-app 初始化完成时触发（全局只触发一次） App.vue里的onLaunch中opt

矫情吗；*/ 2021年09月13日 15:52/ 0 赞/ 891 阅读

相关 uniapp实战——改造导航区域并跳转到商品列表页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

- 日理万妓/ 2021年07月25日 23:04/ 0 赞/ 408 阅读

相关 uniapp中页面跳转和传参

效果图： ![20210306160241888.gif][] ![20210306162337112.gif][] 代码实现：结构目录： ![202103

拼搏现实的明天。/ 2021年07月25日 14:15/ 0 赞/ 534 阅读

相关 uniapp——两种方式导航跳转和传参

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

短命女/ 2021年07月25日 13:31/ 0 赞/ 492 阅读

相关 rn 导航栏动态跳转

若报错undefined is not an object (evaluating 'this.props.navigation.navigate') (1

Love The Way You Lie/ 2021年07月25日 02:58/ 0 赞/ 487 阅读

相关 uniapp 声明式导航、编程式导航、传参、跳转动画

声明式导航以及传参 <navigator url='/页面注册路径?url参数键值对' open-type="跳转方式">内容</navigator>

秒速五厘米/ 2021年07月24日 17:41/ 0 赞/ 518 阅读