解决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 模式设计之工厂模式学习心得
Apr 27 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
JavaScript设计模式初探
Jan 07 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
es6 for循环中let和var区别详解
Jan 12 Javascript
js实现查询商品案例
Jul 22 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
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
Python实现查找系统盘中需要找的字符
2015/07/14 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
Python Pillow Image Invert
2019/01/22 Python
pandas.cut具体使用总结
2019/06/24 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
主题酒店策划书
2014/01/28 职场文书
财务总监岗位职责
2014/03/07 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
生日宴会策划方案
2014/06/03 职场文书
党员演讲稿
2014/09/04 职场文书
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers