Vue注册函数到html页面,vue从创建到完整的案例（7）点击事件与页面跳转

说明

开始

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

首先我们先来改一段代码--刚开始写的时候我以为登录注册是两个页面，后来发现是一个，所以把登录注册的html代码改为

elm

登录|注册

2.跳转函数

那我们先写点击后的跳转函数，在methods中写函数gologin(函数都写在methods中，计算函数写在computed中)

methods:{

//函数

gologin:function(){

}

}

到这我有点挠头了，js的页面跳转用 location.href 来跳转，vue用什么？百度。结果修改函数如下

methods:{

//函数

gologin:function(){

this.$router.push('login');

}

}

还是要修改路由来控制页面。函数写好了怎么调用呢？

3.绑定事件

我们要点击登录注册的按钮跳转页面，那vue的点击事件怎么写呢？看官网用v-on(缩写为@)来绑定点击事件。

咱先用第一个最简单的，写到登录注册按钮上

登录|注册

搞定，点击试试(还不会做动图)

ok！跳转成功！

4.注意

可能有细心地老铁的发现了一个问题，就是咱们的点击事件是加到Mint ui的组件上的，而mintui对原生事件有了处理，可是咱们没有加 .native 修饰符，为什么还可以跳转呢？

老铁别急，下面还有

切记，只有Button的原生事件不需要加.native 修饰符，其他的都要加.native 修饰符。