uni-app，跳轉和傳參

跳轉和傳參

  index頁 的代碼，寫了跳轉方式和傳值過程

<template>
    <view class="content">
        <!-- url 后面加地址 -->
        <navigator url="../hello/hello" >
            <button type="primary" style="font-size: 40upx;">跳轉到Hello頁面（不是導航的頁面）</button>
        </navigator>
        
        <!-- 我們需要配置open-type="switchTab", 因為是底部導航欄， 跳轉需要額外配置 -->
        <navigator url="../guanyu/guanyu" open-type="switchTab" >
            <button type="primary">跳轉到關於頁面（底部導航）</button>
        </navigator>
        
        <!-- 配置: hover-class="navigator-hover"  跳轉到新窗口 -->
        <navigator url="../test/test"  hover-class="navigator-hover">
            <button type="primary">跳轉到test(新窗口)</button>
        </navigator>
        
        <view class="" >
            <button type="default" @click="skip">跳轉到新頁面</button>
        </view>
        
        <!-- ? 后面加要傳的參數， 多個參數用 & 隔開 -->
        <navigator url="../test/test?name=test1&age=19"  hover-class="navigator-hover">
            <button type="default">跳轉傳值 navigator方式</button>
        </navigator>
        
        <view class="" >
            <button type="default" url="../test/test?name=test&age=18" @click="skip1()">跳轉傳值 @click方式</button>
        </view>
        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        methods: {
            skip(){
                // API 形式的跳轉
                // <!-- uni.navigateTo(OBJECT):  保留當前的頁面， 跳轉到另一個頁面， 返回的話原來的頁面還會被保存-->
                // <!-- uni.rediretTO(OBJECT):  關閉當前頁面， 跳轉到另一個頁面 -->
                uni.navigateTo({
                    //里面是一個對象形式的參數
                    url: '../test/test'
                })
            },
            skip1(){
                uni.navigateTo({
                    // ? 后面加要傳的參數， 多個參數用 & 隔開 
                    url: '../test/test?name=test&age=18'
                })
            }
        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }

    .logo {
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }

    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>

 

text頁

<template>
    <view>
        test
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        },
        onLoad(options) {
            //options可以接到index 傳過來的值
            console.log(options)
        },
        // 當前頁面顯示3秒后， 返回上一級頁面
        onShow() {
            setTimeout(function(){
                uni.navigateBack({
                    delta: 1
                })
            }, 3000);
        }
    }
</script>

<style>
 
</style>

 

其他頁隨便寫點兒， 能看出來跳轉了就行

 

2019-06-13  10:17:45