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