🎁写在前面：
观众老爷们好呀，这里是前端小刘不怕牛牛频道，小程序系列又更新了呀，今天的内容是微信小程序的页面导航，非常重要，赶紧拿起小本本记起来呀！
文章目录
一，页面导航
首先，我们先来了解一下什么叫页面导航，其实就是通过识别用户点击来进行页面的跳转。
这一点有点类似于
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设置的页面中啦。
<navigatorurl="/pages/list/list">点击跳转</navigator>
你还可以在里面嵌套其他组件，比如嵌套一个
button
。
1.1.2 导航到非tarBar页面
非
tarBar
页面就是你在
page
文件夹已经定义的页面，但是没有在
app.json
中的
tarBar
配置。
在实际开发中，这种场景也是非常多见了，一个比较复杂的小程序都会有比较多的页面，而这么多页面又不会都在
tarBar
中配置，所有这么页面的跳转就得靠这个方法来实现啦。
与上文一样，也是需要
url
和
open-type
两个属性，
url
的写法不变，有变化的是
open-type
的值需要该为
navigate
。
<navigatorurl="/pages/list/list"open-type='navigate'></navigator>
1.1.3 后退导航
<navigator>
还可以实现页面后退功能。
这时候我们就不用设置
url
属性了，需要更改的是，设置
open-type
的值为
navigateBack
。
我们可以通过设置
delta
设置回退的层级，如果不设置，那么默认值将会为1。
<navigatoropen-type="navigateBack"delta='1'></navigator>
1.2 编程式导航
编程式导航是利用微信小程序顶级对象
wx
下面的几个方法来实现，接下来我们来一一讲解。
1.2.1 导航到tarBar页面
我们将使用
wx
下的
switchTab(obj)
方法，其中
obj
为对象。
对象中有四个属性，
url
、
success
、
fail
、
complete
。
其中`
url是需要跳转的页面地址success是接口调用成功执行的回调函数fail是接口调用失败执行的回调函数complete是完成调用执行的回调函数，无论成功与否，都会执行。
wx.swithTab({url:'/pages/list/list',...)}
1.2.2 导航到非tarBar页面
实现该功能我们需要调用
wx
下的
navigateTo（obj）
方法。
对象中的参数类型与1.2.1一致。
wx.navigateTo({url:'/page/list/list',success:function(){console.log('success');}})
1.2.3 后退导航
这里的后退导航功能，同样的我们需要用到
wx
顶级对象下的
navigateBack（obj）
方法。
不过不同的是，
obj
对象中的参数，
url
改为
delta
，表示会退的 层级，默认值为1，也就是后退一页。
1.3 导航传参
如果我们实现页面跳转之后，下一个页面想要调用前一个页面的参数时，我们该怎么办？
这时候就可以用到导航传参了，导航传参其实和在浏览器中使用GET请求很像，可以把参数设置在
url
中，传递到下一个页面。
在格式上也是通过键值对的方法，路径跟参数之间用
?
隔开，键与值之间用
=
隔开，每个参数之间着用
&
隔开。
如下所示：
url="/pages/list/list?name=myname&pass=yes"
今天的小程序文章到这里就结束啦，如果觉得对您有帮助的话，可以关注牛牛接下来的文章，感谢您对支持，您的支持是我创作的最大动力！！！
债见~~
版权归原作者 前端小刘不怕牛牛 所有， 如有侵权，请联系我们删除。