vue 实现页面跳转


首先,vue项目文件夹如下:

在这里插入图片描述
components下有两个.vue文件,HelloWorld为创建时自动建立的,login需要自己创建的,login页面效果如下:
在这里插入图片描述

 

首先实现登录按钮的跳转,先对index.js进行如下修改:

在这里插入图片描述
在这里插入图片描述

然后打开我的login.vue文件,找到中的登录相关代码,在中添加@click,并在其中写入方法login
在这里插入图片描述
然后在 < script>中的method里补全login相关方法:
在这里插入图片描述
重点是this.$router.push(’/HelloWorld’),这是跳转语句。完成之后点击登录即可跳转:
在这里插入图片描述

接着是实现< router-link>的跳转:

只需要一条语句:
在这里插入图片描述

这样点击注册新账号同样也会跳转到HelloWorld页面。

在vue中使用标签< a>实现跳转较麻烦,标签< router-link>可以很好的代替< a>的功能


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM