解决vue 路由变化页面数据不刷新的问题


Posted in Javascript onMarch 13, 2018

每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人。

问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页。

问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击

按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题。

一级的parent为0,默认不显示或显示。

二级的parent为1,点击一级路由变为如图:

点击进入下一级页面的时候,数据会刷新,但是点击电脑后退时,url最后的parent变为1了,页面还显示2的数据,

解决办法如下:

created () {
 console.log(this.getStatus(this.$route.path))
},
 watch: {
 '$route' (to, from) {
  console.log(this.getStatus(this.$route.path))
 }
 },
 methods: {
 getStatus (urlStr) {
  var urlStrArr = urlStr.split('/')
  return urlStrArr[urlStrArr.length - 1]
 }
},

以上这篇解决vue 路由变化页面数据不刷新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
javascript日期计算实例分析
Jun 29 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
一种angular的方法级的缓存注解(装饰器)
Mar 13 #Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 #Javascript
解决vue多个路由共用一个页面的问题
Mar 12 #Javascript
angular5 httpclient的示例实战
Mar 12 #Javascript
vue 简单自动补全的输入框的示例
Mar 12 #Javascript
webpack打包js的方法
Mar 12 #Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 #Javascript
You might like
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
php7 新增功能实例总结
2020/05/25 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Python如何快速实现分布式任务
2017/07/06 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
python自动发送邮件脚本
2018/06/20 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
零基础学python应该从哪里入手
2020/08/11 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
小学新教师培训方案
2014/02/03 职场文书
离职感谢信怎么写
2015/01/22 职场文书
领导参观欢迎词
2015/01/26 职场文书
催款函范本大全
2015/06/24 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python