解决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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
Js的Array数组对象详解
Feb 22 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
一种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
基于文本的留言簿
2006/10/09 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
Python实现文件按照日期命名的方法
2015/07/09 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
JSF界面控制层技术
2013/06/17 面试题
《阳光》教学反思
2014/02/23 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
设备管理实施方案
2014/05/31 职场文书
门店业绩提升方案
2014/06/08 职场文书
2014年药房工作总结
2014/11/22 职场文书
任命通知范文
2015/04/21 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸