用法：用于頁面跳轉，相當于html里面的<a></a>標簽。
API教程：https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html

四種跳轉的方法，在index里面寫下一段代碼進行測試

1：從首頁跳轉到日志頁面（可以返回）

（注意，在沒有設置底部導航的情況下，沒有tab也可使用這個屬性，有tab頁則需更換switchTab屬性）

<view>
    <navigator  url="/pages/logs/logs" hover-class="changestyle">頁面跳轉，可以返回</navigator>
</view>

2：從首頁跳轉到日志頁面（不可以返回）

（注意，在沒有設置底部導航的情況下，沒有tab也可使用這個屬性，有tab頁則需更換switchTab屬性）

<view>
    <navigator  url="/pages/logs/logs" hover-class="changestyle" redirect>頁面跳轉，無法返回</navigator>
</view>

3：在當前頁面打開

新建一個文件夾，命名為no,完善里面的wxml測試信息，為了方便測試隨意填充內容

<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">我是一個自由分散的頁面哦</navigator>  
 </view>

打開全局app.json文件，將剛剛新建文件夾no的路徑寫入

我們現在要測試從首頁的鏈接上打開，點擊鏈接，即可在當前的首頁頁面打開no頁面

4：切換到ta頁：

代碼
<view>
<navigator url="/pages/logs/logs" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
</view>

注意：我這里用的跳轉是switchTab跳轉，而不是navigator

原因：所有的頁面路徑都需配置在pages下面tabBar里一般就是四個主頁面，這些主頁面之間的跳轉就像tab切換，這幾個頁面需要在tabBar里另外配置，普通頁面向這四個主頁面跳轉的時候，不能使用navigator，需用switchTab。

經驗總結：TabBar中的list項的配置pagePath，盡量不要作為其他頁面的跳轉鏈接。

相關推薦：

微信小程序頁面跳轉功能

微信小程序頁面間跳轉如何監聽事件

以上就是微信小程序實例：四個頁面跳轉的方法（附代碼）的詳細內容，更多請關注php中文網其它相關文章！