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