uni-app学习笔记-页面跳转和传参问题(六)

2019-12-16 17:38:57 浏览数 (2)

在登录界面,输入用户名和密码,输入成功之后,会登录进我们的项目里面,现在来实现一下,登录到导航tab页面和普通页面。

一:页面跳转

1:登录成功,跳转到导航tab页面 注意:跳转到 tabBar 页面只能使用 switchTab 跳转 在login.vue里面

代码语言:javascript复制
if(checkRes){
            uni.showToast({title:"验证通过!", icon:"none"});
            uni.switchTab({
            url: "../tabbar-1/tabbar-1",
            success: res => {},
            fail: () => {},
            complete: () => {}
             });

tabbar-1界面是跳转成功后的导航tab页面

2:登录成功跳转到一个普通页面 新建一个页面list2detail-list

打开配置界面pages.json,配置新建的页面的路径

在login.vue里面写代码,验证通过的时候跳到新建的页面(有返回按钮)

代码语言:javascript复制
if(checkRes){
   uni.showToast({title:"验证通过!", icon:"none"});
   uni.navigateTo({
   url: '../list2detail-list/list2detail-list'
});
}

当然了,根据需要也可以这样写(无返回按钮)

代码语言:javascript复制
if(checkRes){
   uni.showToast({title:"验证通过!", icon:"none"});
   uni.redirectTo({
   url: '../list2detail-list/list2detail-list'
});
}

关于路由和页面跳转可以参考 https://uniapp.dcloud.io/api/router?id=relaunch

二:关于页面传参问题

从login页面跳转并且带过来参数 login

代码语言:javascript复制
if(checkRes){
                    uni.showToast({title:"验证通过!", icon:"none"});
                    uni.navigateTo({
                        url: '../list2detail-list/list2detail-list?id=1&name=我是上一个页面带来的参数'
                    });
                    
                }

list2detail-list页面接收参数

代码语言:javascript复制
<template>
    <view>
    </view>
</template>
<script>
// 在list2detail-list页面接受参数
export default {
    onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}
</script>
<style>
</style>

打开list2detail-list页面的控制台可以看见参数

0 人点赞