小程序多种路由跳转的区别

时间: 2020-02-14阅读: 157标签: 路由

前言

从Anjular转换到微信小程序,从功能丰富,便捷操作的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理作用吧,从一开始就觉得它不好用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手,感觉也挺好的,初次接触小程序也是摸着石头过河,要啥就搜啥,期间要用到页面跳转(现在可能用不到了,当时对需求不是很了解,但是以后的功能应该会用到),然后找了很多资料,发现跳转也分很多种,当时就选了一个用上了,后来又试了试别的,发现真的是各有其用。


wx.navigateTo(Object object)

navigateTo 是打开新界面,打开新界面之后,当前页处于什么状态呢,点击返回返回的又是哪一页呢,打开控制台试验一下,在此之前,先了解一下页面的生命周期:

函数功能
onLoad监听页面加载
onReady监听页面初次渲染完成
onShow监听页面显示
onHide监听页面隐藏
onUnload监听页面关闭

我们先给标签加跳转功能

<van-sidebar active-key="{{ activeKey }}">

<van-sidebar-item class="menufont" bindtap="food" title="食材" />

<van-sidebar-item class="menufont" title="包装" />

<van-sidebar-item class="menufont" title="配送" />

</van-sidebar>

我们给“食材”一项加跳转功能,在标签加入bindtap属性,定义的方法名是什么,它的值就是什么,然后在ts文件里添加方法:

food(){
wx.navigateTo({
url:'../food/food'
  })
},

这样就实现了从index界面跳转到food界面,我们对每个界面添加了onLoad()、onShow()、onHide()、onUnload()方法监控他们的状态,index界面跳转到Page1界面,再由Page1界面跳转到Page2界面,看一下控制台的信息:

通过以上信息我们可以发现,跳转后之前的界面隐藏了起来,返回时当前界面被关闭。


wx.redirectTo(Object object)

redirectTo是关闭当前界面,跳转到下一界面,那么此时我再返回,返回的是哪个界面呢。
将之前Page1跳转到Page2的函数修改为redirectTo,然后看控制台:

跳转后,之前的界面关闭,再次返回返回的最近的隐藏的界面。


wx.reLaunch(Object object)

reLaunch 关闭所有页面,打开到应用内的某个页面,那么返回的又是哪个界面呢。
将之前Page1跳转到Page2的函数修改为reLaunch,然后看控制台:

之前的所有界面关闭,返回时跳转回初始界面index。


总结

小程序的跳转种类真的挺多的,如果真正把握好隐藏还是关闭,返回界面是哪个,页面跳转真的能省力不少,一开始认为小程序挺难写的,后来才明白不是它难写,而是我认为它难写,心态真的挺重要的。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9024

react-router中的exact和strict

每次用配置react路由都会考虑是否应该给给<Route>组件加上exact或strict。下面妹子将于自认为比较清晰的方式列举出来什么场景需要加和不加。如果没有子路由的情况,建议大家配都加一个exact;

在 Vue.js 中使用嵌套路由

随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性。

Vue路由守卫之路由独享守卫

路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合)

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

Vue 动态添加路由及生成菜单

写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单。为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的。

在vue中使用setTimeout,离开当前路由setTimeout未销毁的问题

从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况。

实现vue-router部分功能

为了了解路由的底层工作原理,自己参考资料,仿写了vue-router的部分功能。当然自己写的DEMO功能较粗糙,主要实现核心功能,其它功能有待完善、补充。

JS是如何实现前端路由的 JS实现原生路由

路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时

js实现哈西路由原理

在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理,先看一个简单的路由和页面内容关联的例子,要实现两个功能:

理解Web路由

在Web开发过程中,经常会遇到『路由』的概念。那么,到底什么是路由?简单来说,路由就是URL到函数的映射。route就是一条路由,它将一个URL路径和一个函数进行映射

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广