uni-app的两种方式跳转和传参

梦里梦外; 2021-07-25 01:43 529阅读 0赞

# 一 官网 #

1 声明式跳转

[http://uniapp.dcloud.io/component/navigator][http_uniapp.dcloud.io_component_navigator]

2 编程式跳转

[http://uniapp.dcloud.io/api/router?id=navigateto][http_uniapp.dcloud.io_api_router_id_navigateto]

[http://uniapp.dcloud.io/api/router?id=switchtab][http_uniapp.dcloud.io_api_router_id_switchtab]

# 二 代码 #

1 新建 navigator.vue

<template>
    	<view>
    		<view>导航跳转的学习</view>
    		<navigator url="/pages/detail/detail?name=cakin&age=19">跳转到详细页并传参</navigator>
    		<navigator url="/pages/message/message" open-type="switchTab">跳转到信息页</navigator>
    		
    		<navigator url="/pages/detail/detail" open-type="redirect">跳转到详细页</navigator>
    		<button @click="goDetail">跳转到详情页</button>
    		<button @click="goMessage" type="primary">跳转到信息页</button>
    		<button @click="goDetail1" type="warn">跳转到详情页,并关闭当前页</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		onUnload() {
    			/* 用来测试 redirect*/
    			console.log('导航页面卸载了')
    		},
    		methods: {
    			goDetail() {
    				uni.navigateTo({
    					url: '/pages/detail/detail'
    				});
    			},
    			goDetail1(){
    				uni.redirectTo({
    					url: '/pages/detail/detail'
    				})
    			},
    			goMessage() {
    				uni.switchTab({
    					url:'/pages/message/message'
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

2 修改detail.vue

<template>
    	<view>
    		<view>
    			<text>唱歌跳舞打篮球</text>
    		</view>
    		<view>
    			<text selectable>唱歌跳舞打篮球</text>
    		</view>
    		<view>
    			<text selectable space="ensp">唱歌 跳舞打篮球</text>
    		</view>
    		<view>
    			<text selectable space="emsp">唱歌 跳舞打篮球</text>
    		</view>
    		<view>
    			<text selectable space="nbsp" style="font-size: 40px;">唱歌 跳舞打篮球</text>
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		onLoad(param) {
    			console.log(param)
    		},
    	}
    </script>
    <style>
    </style>

# 三 效果 #

1 导航展示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

2 传参

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[http_uniapp.dcloud.io_component_navigator]: http://uniapp.dcloud.io/component/navigator
[http_uniapp.dcloud.io_api_router_id_navigateto]: http://uniapp.dcloud.io/api/router?id=navigateto
[http_uniapp.dcloud.io_api_router_id_switchtab]: http://uniapp.dcloud.io/api/router?id=switchtab
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/403dcafcf99c412f8ab2c2e9bb37a90f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/ad159527560740d28817ce470ecb1b7b.png