web前端开发博客
专注web前端发展
2018年07月30日 作者: 国瑞个人博客 392次浏览
vue-cli（Vue-Router）编程式导航，借助浏览器自带的前进后退按钮，我们就可以实现页面的前进后退了，实现原理是当用户每点击一次，当前的路径就会被保存，返回就是跳转到上一次的路径。在Vue-Router中，也提供了这样的方法，通过编写代码来实现导航的切换，让我们来体验一下吧!
1 2 3 4 5 6 7 8 9 10 11 | <router-link to="/home">home</router-link> <router-link to="/document">document</router-link> <router-link to="/Search">Search</router-link> <!-- 前进和后退 --> <button type="" @click="backHandle">后退</button> <button type="" @click="forwardHandle">前进</button> <button type="" @click="goHandle">控制前进后退的步数</button> <button type="" @click="pushHandle">控制指定的导航push</button> <button type="" @click="replaceHandle">控制指定的导航relace</button> <router-view/> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | export default { name: 'App', data(){ return { index:'/rank', } }, methods:{ //后退 backHandle(){ this.$router.back(); }, //前进 forwardHandle(){ this.$router.forward(); }, goHandle(){ //负数后退 正数前进，0跳转到当前导航 this.$router.go(-1); }, pushHandle(){ //this.$router.push('./document'); this.$router.push({path:'./document'}); }, replaceHandle(){ this.$router.replace({path:'./document'}); } } } |
1 | this.$router.back(); |
1 | this.$router.forward(); |
1 2 | //负数后退 正数前进，0跳转到当前导航 this.$router.go(-1); |
1 2 | //this.$router.push('./document'); //方法一 this.$router.push({path:'./document'}); //方法二 |
1 | this.$router.replace({path:'./document'}); |
点击快速分享：
以上就是国瑞前端个人博客带来的是《vue-cli（Vue-Router）编程式导航》，感谢您的观看！
如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/351.html
「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
上一篇：vue-cli（Vue-Router）动态设置name属性左右切换
相关文章：国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
web：可以，百度一搜就搜到了这篇，写的挺好
评：elementUI如何禁用时间组件日期web：感觉博主推荐，postman的功能非常强大，用起来很方便
评：推荐一款接口测试小插件_postmanweb：Smile_Blog主题，一个非常不错的wordpress主题，，值得推荐
评：Smile_Blog主题简介
国瑞个人博客：多谢夸奖，博主自建主题，地址为huangguorui.cn，欢迎鉴赏！
评：Smile_Blog主题简介
在线工具：不错的主题，非常适合技术类博客。
评：Smile_Blog主题简介国瑞个人博客：眉清目秀哇，咋地啊，对我网站感兴趣？
评：博主参加专升本去了
共有 0 条评论