uniapp页面跳转的几种方式(代码片段)

措手不及ya 措手不及ya     2023-03-30     214

关键词:

uniapp页面跳转的几种方式


一、uni.navigateTo

  1. 定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
  2. 使用:
// 1.不传参
uni.navigateTo(
    url:'./home/index'
);
// 2.传参字符串
uni.navigateTo(
    url:`./home/index?title=$title`
);
// 3.传参对象
// 传入
let data = 
    title:'hello',
    id: 1

uni.navigateTo(
	url:`./home/index?data=`+ encodeURIComponent(JSON.stringify(data))
)

// 接受参数
onLoad: function (option) 
    const item = JSON.parse(decodeURIComponent(option.item));

二、uni.redirectTo

  1. 定义:可以关闭当前界面并跳转到其他的非tabbar界面(可带参数)
  2. 使用:
uni.redirectTo(
  url:'./home/index'
);

三、uni.reLaunch

  1. 定义:关闭所有页面,打开到应用内的某个页面(可带参数)
  2. 使用:
uni.reLaunch(
    url:'./home/index'
);

四、uni.switchTab

  1. 定义:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  2. 使用:
uni.switchTab(
   url:'./home/index'
);

五、uni.navigateBack

  1. 定义:关闭当前页面,返回上一页面或多级页面
  2. 使用:
uni.navigateBack(
    url:'./home/index'
);
uni.navigateBack(
	delta: 2
);

总结

navigateTo, redirectTo 只能打开非 Tab 页面,可传参。
switchTab 只能打开 Tab 页面,不可传参。
reLaunch 可以打开任意页面,可传参。

uniapp页面跳转的几种方法和区别(代码片段)

...。2.页面栈就是用来储存页面的栈,也有栈的特性。uniapp是通过页面栈来管理所有的页面,我们可以将页面栈理解为一个放页面的容器。每次跳转页面,都会从这个容器中添加或者删除页面。1.保留当前页面,可跳... 查看详情

js实现页面跳转的几种方法(代码片段)

要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码JS跳转大概有以下几种方式:第一种:(跳转到b.html)<script language="javascript" type="text/javascript">window.location.href="b.html";</script>第二种:(返回上一... 查看详情

设置域名跳转的几种方式(代码片段)

背景:本文以ubuntu服务器为例来说明几种设置域名跳转的情况设置域名301跳转的几种途径:1、域名解析处设置显性URL比如解析处可设置a.com显性解析到b.com 2、nginx配置文件处跳转。a、proxy跳转/etc/nginx/conf.d下面设置跳转serverli... 查看详情

html5页面跳转的几种方法(代码片段)

1.定时跳转或者原地刷新对于刷新当前页面js控制为:window.location.reload();//刷新当前页面,重新向服务器请求数据head标签内部的meta标签方式,定时刷新当前界面或刷新到另一个页面:<metacharset="utf-8"http-... 查看详情

javascript实现页面跳转的几种方式

Javascript实现页面跳转的几种方式概述  相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿... 查看详情

html+jsvue页面跳转的几种方式总结(代码片段)

...;JS实现跳转:特别提醒:有些跳转方式是只能跳转一级页面,有些可以跳转多级页面,在使用时要注意选择跳转方式!1、javascript中实现跳转://直接跳转window.location.href='index.html';//定时跳转setTimeout("... 查看详情

实现前端页面跳转的几种方式

实现前端页面跳转的几种方式推荐使用<scriptlanguage=‘javascript‘>document.location=‘http://mail.qq.com/domain/longtimenosee.cc‘</script>相关阅读http://www.jb51.net/article/25403.htmhttp://my.oschina.net/ososchi 查看详情

js实现页面跳转的几种方式

第一种:<scriptlanguage="javascript" type="text/javascript">  window.location.href="login.php?backurl="+window.location.href;</script> 第二种:<scriptlanguage="javascript">  alert( 查看详情

javascript实现页面跳转的几种方式

...sp;相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一下。 第一种:直接跳转... 查看详情

javascript实现页面跳转的几种方式

...sp;相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一下。 第一种:直接跳转... 查看详情

js实现页面跳转的几种方式

第一种:    <scriptlanguage="javascript"type="text/javascript">               window.location.href="xx. 查看详情

页面跳转的几种方式

第一种:   <scriptlanguage="javascript">          window.location.href="index.php";        &n 查看详情

实现跳转的几种法式

...意义。跳转就是当我们点击按钮或者实现某个活动从一个页面到另一个页面,那么我就来介绍几种跳转的法式。 第一种跳转方式-----Storyboard中segues(拉线):              &nb... 查看详情

vue-路由跳转的几种方式和路由重定向(代码片段)

一、标签路由router-link 注意:router-link中链接如果是‘/‘开始就是从根路由开始,如果开始不带‘/‘,则从当前路由开始。1、不传参 <router-link:to="name:‘Home‘"> <router-link:to="path:‘/home‘">2、传参  <router-link:... 查看详情

js页面跳转常用的几种方式(转)

js页面跳转常用的几种方式转载  2010-11-25 作者:   我要评论js实现页面跳转的几种方式,需要的朋友可以参考下。第一种: 复制代码代码如下:<scriptlanguage="javascript"type="text/javascript"> window.location... 查看详情

web前端-vue路由跳转的几种方式及参数获取router-link;this.$router.push()(代码片段)

...参$route.params.id,script取参this.$route.params.id,刷新页面参数消失;2) 查看详情

jquerymobile页面跳转切换的几种方式

...来也是相当的easy。所以这一片文章就是介绍jQueryMobile的页面跳转的。少说废话,看源代码:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transi 查看详情

页面跳转的几种方法

PHP <?php//302重定向$url="http://www.cnblogs.com/mengor";header("Location:$url");//301重定向$url="http://www.cnblogs.com/mengor";header("HTTP/1.1301MovedPermanently");header("Location:$url"); m 查看详情