解决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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
小程序自定义弹框效果
Nov 16 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/11/16 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
公司授权委托书范文
2014/09/21 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers