uni-app 页面跳转的两种方法

短命女 2022-12-01 03:47 143阅读 0赞

### 1.navigator 标签 ###

<navigator url="../hello/hello" open-type="navigate">
        <view class="struct">
            I am {
       {student.age}} yeas old </br>
            I have skills such as {
       {student.skill[0]}},{
       {student.skill[1]}}
        </view>
    </navigator>

### 2.@tap事件跳转 ###

<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="openinfo">
        <view class="uni-media-list-text-top">{
       {item.title}}</view>
    </view>
     
     
    <script>
    methods: {
                openinfo(e) {
                    console.log(e)
                    var newsid = e.currentTarget.dataset.newsid ;    
                    uni.navigateTo({
                        url: '../info/info?newsid='+newsid,
                        success: res => {},
                        fail: () => {},
                        complete: () => {}
                    });
                }
            }
    </script>

三者区别

redirectTo：关闭当前页，跳转到指定页；  
navigateTo：保留当前页，跳转到指定页；  
switchTap：只能用于跳转到tabbar页面，并关闭其他非tabbar页面。

分别转自：[uni-app 页面跳转的两种方法][uni-app]

[redirectTo、navigateTo与switchTap区别][redirectTo_navigateTo_switchTap]

[uni-app]: https://www.cnblogs.com/lccode/p/10615382.html
[redirectTo_navigateTo_switchTap]: https://blog.csdn.net/qq_37959401/article/details/80470575

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flex 页面跳转四种方法

在学习Flex的过程中，你可能会遇到Flex页面跳转的问题，本文和大家分享一下，页面在flex里面其实就是一个个的 Canvas，vbox，hbox等等之类的东西，看到的

痛定思痛。/ 2023年08月17日 15:50/ 0 赞/ 124 阅读

相关 uniapp执行switchTab跳转，不调用跳转页面onLoad的方法解决办法

1. 利用reLaunch跳转页面 wx.reLaunch（）：关闭所有页面，打开到应用内的某个页面，会执行onLoad操作 wx.reLaunch({

约定不等于承诺〃/ 2022年12月28日 06:28/ 0 赞/ 1465 阅读

相关 uni-app 页面跳转的两种方法

1.navigator 标签 <navigator url="../hello/hello" open-type="navigate"> <vie

短命女/ 2022年12月01日 03:47/ 0 赞/ 144 阅读

相关 uniapp 页面跳转的坑

uniapp 页面跳转的坑我们在使用 uniapp 的时候，经常使用到页面跳转，uniapp 的几个常用跳转我就不一一列表了。我就说我遇到的坑吧如下图，我要从

川长思鸟来/ 2022年11月20日 05:59/ 0 赞/ 342 阅读

相关 html自动跳转页面,HTML实现页面自动跳转的五种方法

在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法，本文继续给大家介绍有关html页面跳转相关知识，一起学习吧。下面列了五个例子来详细说明，这几个例子的主要功能

素颜马尾好姑娘i/ 2022年10月05日 10:46/ 0 赞/ 354 阅读

相关安卓——Intent（实现页面跳转的两种方法）

![70][] 下图中两个不同的方法就是两种页面之间跳转的情况 1>跳转不返回数据 2>跳转返回数据 ![70 1][] 实例：第一种启

深碍√TFBOYSˉ_/ 2022年05月29日 22:14/ 0 赞/ 401 阅读

相关 HTML页面跳转的5种方法

下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。 1) html的实现

客官°小女子只卖身不卖艺/ 2022年01月07日 19:37/ 0 赞/ 296 阅读

相关防止页面跳转的几种方法

1.`<a href="javascript:;" >先学习</a>` `<a href="javascript:;" >点我试试</a>`：执行一段空白的javascr

Myth丶恋晨/ 2021年11月29日 16:34/ 0 赞/ 452 阅读

相关 vue-router跳转时打开新页面的两种方法

1、<vue-link>标签实现新窗口打开官方文档中说 v-link 指令被 <router-link> 组件指令替代，且 <router-link> 不支持 t

约定不等于承诺〃/ 2021年09月24日 07:30/ 0 赞/ 805 阅读

相关 uniapp——两种方式导航跳转和传参

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

短命女/ 2021年07月25日 13:31/ 0 赞/ 540 阅读