解决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 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 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
咖啡常见的种类
2021/03/03 新手入门
一个好用的分页函数
2006/11/16 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python数据类型学习笔记
2016/01/13 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
解决Python安装cryptography报错问题
2020/09/03 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
2014新年寄语
2014/01/20 职场文书
高一物理教学反思
2014/01/24 职场文书
年终工作总结范文2014
2014/11/27 职场文书
车间班组长竞聘书
2015/09/15 职场文书