mpvue——頁面跳轉

 兩個頁面

兩個頁面的跳轉,只是單純的A->B這種跳轉。

組件

直接使用小程序的組件，navigator，里面還有一些其他的參數，大家可以自行翻閱官方文檔

<navigator url="./join/main" >參與場次</navigator>

 

API

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。

官方文檔地址

html

<div class="detail-btn">
    <div>
      <img src="/static/images/[e-mail]" alt="參與場次">
      <span @click="openResult">參與場次</span>
    </div>
    <div>
      <img src="/static/images/[e-mail]" alt="獎品記錄">
      <span @click="viewPrizeRecord">獎品記錄</span>
    </div>
</div>

 

methods

mpvue頁面跳轉是兼容小程序的，所以小程序的跳轉也是可以直接使用的，為了演示下面兩個跳轉都用了。

methods: {
      openResult () {
          wx.navigateTo({url: './join/main'})
        },
      viewPrizeRecord () {
          mpvue.navigateTo({url: './prize/main'})
        }
    }

 

下面的這個寫法也可以，但是定義的常量名必須為url，還是比較推薦上面的寫法

 methods: {
      openResult () {
         const url = './join/main'
         mpvue.navigateTo({url})
        },
      viewPrizeRecord () {
          mpvue.navigateTo({url: './prize/main'})
        }
    },

 

內頁跳首頁

我從A頁面跳到B頁面,然后從B頁面跳首頁,使用API wx.reLaunch()

html

<img @click="goHome" class="empty-btn" src="/static/images/btn1.png" alt="">

 

methods

 goHome () {
                 mpvue.reLaunch({url:'/pages/index/main'})
            },