解决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代码
Nov 09 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
js实现楼层导航功能
Feb 23 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
vue实现简单计算商品价格
Sep 14 Javascript
js实现简单商品筛选功能
Feb 02 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php中{}大括号是什么意思
2013/12/01 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
JS表的模拟方法
2015/02/05 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python 中xpath爬虫实例详解
2019/08/26 Python
tensorflow 环境变量设置方式
2020/02/06 Python
如何教少儿学习Python编程
2020/07/10 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
大学毕业感言
2014/01/10 职场文书
庆七一活动方案
2014/01/25 职场文书
学生感冒英文请假条
2014/02/04 职场文书
青年教师培训方案
2014/02/06 职场文书
读书活动总结
2014/04/28 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers