uni-app-导航跳转

声明式跳转

利用组件跳转

编程式跳转

api跳转

<template>
    <view>
        <button type="primary" @click="upload">上传图片</button>
        <image v-for="item in img_arr" :src="item" @click="preview(item)"></image>
        <!-- #ifdef H5 -->
        <view>旨在h5</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view>旨在小程序</view>
        <!-- #endif -->
        <button @click="send">显示</button>
        <navigator url="../detail/detail?id=80&age=16">详情</navigator>
        <navigator url="../detail/detail" open-type="redirect">详情</navigator>
        <navigator url="../index/index" open-type="switchTab">index</navigator>
        <button type="primary" @click="go_detail">详情</button>
    </view>
</template>

<script>
    export default {
        onUnload() {
            console.log("A页面卸载")
        },
        data() {
            return {
                img_arr: []
            }
        },
        methods: {
            upload() {
                // let this_ = this
                uni.chooseImage({
                    success: res => {
                        this.img_arr = res.tempFilePaths
                        console.log(this.img_arr)
                    }
                })
            },
            preview(current){
                uni.previewImage({
                    current,
                    urls:this.img_arr,
                    indicator:'number',
                    loop:true,
                    success() {
                        console.log("成功")
                    }
                })
            },
            send(){
                // #ifdef H5
                console.log("h5打印")
                // #endif
                // #ifdef MP-WEIXIN
                console.log("微信小程序")
                // #endif
            },
            go_detail(){
                uni.navigateTo({
                    url:'../detail/detail?id=80&age=16'
                })
            },
            go_index(){
                uni.switchTab({
                    url:'../index/index'
                })
            },
            go_details(){
                uni.redirectTo({
                    url:'../detail/detail'
                })
            }
        }
    }
</script>

<style>
    /* #ifdef H5 */
    view{
        color: red;
    }
    /* #endif */
    /* #ifdef MP-WEIXIN */
    view{
        color: blue;
    }
    /* #endif */
</style>

接收方法

onload(opt){
    console.log(opt)
}