vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
来源:互联网 发布:mac os x lion 10.7.3 编辑:程序博客网 时间:2024/06/05 10:41
最近在做一个小型的vue移动端项目(自己练手),遇到的两个问题记录一下:
问题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; } }}
这样,当页面处在主页下的时候,返回键自动隐藏掉,如果不是当前主页,就显示返回键
阅读全文
0 0
- vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
- vue移动端iso 利用钩子里面的导航守卫beforeRouteLeave实现返回按钮不返回上一次路由,返回到自己指定的路由
- ionic back 返回按钮不正常显示&&二级路由点击返回按钮失效无法返回到上一级页面的问题
- 返回顶部隐藏显示的控制代码
- 根据返回类型显示页面
- 页面中根据滚动条,显示返回顶部图标
- 隐藏当前页NavigationBar上的返回按钮
- js 控制页面的隐藏与显示
- 以下示例显示返回当前安装的版本信息。
- java中根据调用后台URL得到返回的值(在网页上显示的结果)
- 小程序中 判断当前首页是从其他页面返回,还是由入口打开
- 右滑返回与导航栏的显示隐藏优化
- vue 遍历元素,控制当前元素下span的显示隐藏
- vue返回上一页
- 【RIP路由协议】由相邻路由发来的RIP信息更新当前路由的路由表
- 基于vue-cli的vue项目之路由6--重定向3-----method返回重定向路径
- JavaScript控制页面控件的隐藏与显示
- JavaScript控制页面控件的隐藏与显示
- Javascript基础应用
- Django小开发《采用验证码的注册页代码》
- 阿了嗝欢的小白日记——HashMap(上)
- chasing实习总结
- 高薪全栈工程师必备Linux 基础
- vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
- 技术网站
- C# Task WhenAny和WhenAll 以及TaskFactory 的ContinueWhenAny和ContinueWhenAll的实现
- 稀疏矩阵(C)
- 【python入门笔记】(一)安装与配置环境
- URL特殊字符及编码值列表大全
- EasyNVR如何实现跨域鉴权
- windows7无声音,提示未插入扬声器或耳机的解决办法
- ios 提示新版本更新