mpvue——頁面跳轉

 兩個頁面

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

組件

直接使用小程序的組件，navigator，裏面還有一些其餘的參數，你們能夠自行翻閱官方文檔

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

 

API

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

官方文檔地址

html

<div class="detail-btn">
    <div>
      <img src="/static/images/game_count@3x.png" alt="參與場次">
      <span @click="openResult">參與場次</span>
    </div>
    <div>
      <img src="/static/images/game_log@3x.png" 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'})
            },