vue從建立到完整的餓了麼（7）點擊事件與頁面跳轉

說明

1.上一章--登陸註冊頁面及密碼暗明文轉換
2.蒼渡大神項目源碼--Github地址
3.UI框架--Mint ui
4.下一章--city.vue佈局及vuex的state屬性簡單應用

開始

1.先看一下目前home.vue的效果圖

首先咱們先來改一段代碼--剛開始寫的時候我覺得登陸註冊是兩個頁面，後來發現是一個，因此把登陸註冊的html代碼改成

<mt-header fixed>
            <span slot="left">elm</span>
            <mt-button slot="right">登陸|註冊</mt-button>
</mt-header>

2.跳轉函數
那咱們先寫點擊後的跳轉函數，在methods中寫函數gologin（函數都寫在methods中，計算函數寫在computed中）

methods:{
  //函數
    gologin:function(){
    
    }

  }

到這我有點撓頭了，js的頁面跳轉用 location.href 來跳轉，vue用什麼？百度。結果修改函數以下

methods:{
  //函數
    gologin:function(){
        this.$router.push('login');
    }
  }

仍是要修改路由來控制頁面。函數寫好了怎麼調用呢？

3.綁定事件
咱們要點擊登陸註冊的按鈕跳轉頁面，那vue的點擊事件怎麼寫呢？看官網用v-on（縮寫爲@）來綁定點擊事件。

咱先用第一個最簡單的，寫到登陸註冊按鈕上

<mt-button @click="gologin" slot="right">登陸|註冊</mt-button>

搞定，點擊試試（還不會作動圖）

ok！跳轉成功！

4.注意

可能有細心地老鐵的發現了一個問題，就是我們的點擊事件是加到Mint ui的組件上的，而mintui對原生事件有了處理，但是我們沒有加 .native 修飾符，爲何還能夠跳轉呢？

老鐵別急，下面還有

切記，只有Button的原生事件不須要加.native 修飾符，其餘的都要加.native 修飾符。