vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
2017-11-28 13:49
771 查看
最近在做一个小型的vue移动端项目(自己练手),遇到的两个问题记录一下:
问题1:如何使用点击方式控制当前页面返回到上一个路由页面:
在网上查阅了相关的资料,返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上,点击触发该方法;具体代码如下:
1.在当前页面添加返回按钮
2.在方法体内现价back方法
问题2:如何控制"返回键" 的显示和隐藏:
由于这里需要频繁的改变”返回键“的显示和隐藏,所以这里考虑用v-show,
触发isShow 的值改变的事件应该是当前页面路由地址的改变,并且这里需要使用watch完成监控:
这样,当页面处在主页下的时候,返回键自动隐藏掉,如果不是当前主页,就显示返回键
问题1:如何使用点击方式控制当前页面返回到上一个路由页面:
在网上查阅了相关的资料,返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上,点击触发该方法;具体代码如下:
1.在当前页面添加返回按钮
<!--返回按钮--> <div class="backTo" v-show="isShow"> <span v-on:click="back">返回</span> </div>
2.在方法体内现价back方法
methods:{ back(){ this.$router.go(-1);//返回上一层 }, },
问题2:如何控制"返回键" 的显示和隐藏:
由于这里需要频繁的改变”返回键“的显示和隐藏,所以这里考虑用v-show,
data() { return { isShow:false }
触发isShow 的值改变的事件应该是当前页面路由地址的改变,并且这里需要使用watch完成监控:
watch:{ $route(now,old){ //监控路由变换,控制返回按钮的显示 if(now.path=="/home/home"){ this.isShow=false; } else{ this.isShow=true; } } }
这样,当页面处在主页下的时候,返回键自动隐藏掉,如果不是当前主页,就显示返回键
相关文章推荐
- 如何获取taskflow的id值,用于控制当前页面的控件显示或隐藏
- vue 遍历元素,控制当前元素下span的显示隐藏
- Dorado页面中点击表格中的记录时当前行自动调整行高,换行显示隐藏的信息
- angular JS 基于ionic框架 开发移动端项目 实现进入前台 判断用户权限 控制项目UI布局和tab的部门显示和隐藏
- js小记---根据后台数据的多少控制滚动条显示或隐藏(scroll or hidden)
- 解决vue脚手架项目打包后路由视图不显示的问题
- javascript控制页面控件隐藏显示的两种方法
- JavaScript控制页面元素显示隐藏
- javascript实现信息的显示和隐藏如注册页面
- JavaScript控制页面显示和隐藏带案例
- 2013.11.28 Base64编码后的图片信息在JSP页面中的显示[JFinal框架项目]
- 1. AngularJS+路由+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息(路由显示添加页面)
- vue 移动端今天写了一个根据后台传过来的http状态码,来实现跳转error页面
- 根据当前时间在jsp页面上显示上午或下午
- 隐藏tomcat页面异常显示的版本信息
- 项目访问index.html,默认跳转到login.jsp页面,隐藏地址栏每次显示请求路径和参数,定个在域名不变
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
- VUE路由根据返回状态判断添加响应拦截器(草稿)
- 返回顶部隐藏显示的控制代码
- 弹出窗口TreeView与ListBox结合显示信息并返回给页面