【微信小程序】一文读懂页面导航_微信小程序分类导航(1)

🎁写在前面：
观众老爷们好呀，这里是前端小刘不怕牛牛频道，小程序系列又更新了呀，今天的内容是微信小程序的页面导航，非常重要，赶紧拿起小本本记起来呀！

文章目录

• • 一，页面导航
    • • 1.1 声明式导航
        • • 1.1.1 导航到tarBar页面
            • 1.1.2 导航到非tarBar页面
            • 1.1.3 后退导航
        • 1.2 编程式导航
        • • 1.2.1 导航到tarBar页面
            • 1.2.2 导航到非tarBar页面
            • 1.2.3 后退导航
        • 1.3 导航传参

一，页面导航

首先，我们先来了解一下什么叫页面导航，其实就是通过识别用户点击来进行页面的跳转。

这一点有点类似于vue中的vue-router路由，我们可以通过<router-link>标签实现单页面内分页面的渲染，只不过小程序的页面导航相对来说，比较简单。

小程序的页面导航分为两种，声明式导航和编程式导航，话不多说，我们现在正式开始。

1.1 声明式导航

声明式导航就是利用小程序的<navigator>实现的，其中有url属性，在效果上就类似浏览器的a超链接标签。

1.1.1 导航到tarBar页面

还记得我们之前学到的tarBar是啥不，底部的导航栏，点击后可以跳转到相对应的页面，而用<navigator>也可以实现。

我们需要设置两个属性在navigator组件中，url和open-type。

• url：设置需要跳转的页面所处的位置（页面地址），并且前面必须由/开头，比如——url = '/pages/content/conten'
  最后一个content不需要加文件后缀。
• open-type：设置navigator的跳转方式，这里选择值为switchTab，表示跳转的页面是被配置到tarBar中的。
  tarBar页面配置：
  在app.json文件中
  
  这样我们就实现了点击跳转到tarBar设置的页面中啦。

<navigator url="/pages/list/list">点击跳转</navigator>

你还可以在里面嵌套其他组件，比如嵌套一个button。

1.1.2 导航到非tarBar页面

非tarBar页面就是你在page文件夹已经定义的页面，但是没有在app.json中的tarBar配置。

在实际开发中，这种场景也是非常多见了，一个比较复杂的小程序都会有比较多的页面，而这么多页面又不会都在tarBar中配置，所有这么页面的跳转就得靠这个方法来实现啦。

与上文一样，也是需要url和open-type两个属性，url的写法不变，有变化的是open-type的值需要该为navigate。

<navigator url="/pages/list/list" open-type='navigate'>
</navigator>

1.1.3 后退导航

<navigator>还可以实现页面后退功能。

这时候我们就不用设置url属性了，需要更改的是，设置open-type的值为navigateBack。

我们可以通过设置delta设置回退的层级，如果不设置，那么默认值将会为1。

<navigator open-type="navigateBack" delta='1'></navigator>

1.2 编程式导航

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

😕/bbs.csdn.net/topics/618545628)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！