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 修饰符。