解决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与webservice的通信实现代码
Dec 25 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
详解JavaScript函数
Dec 01 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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实现用户认证及管理完全源码
2007/03/11 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
Python中的各种装饰器详解
2015/04/11 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
django使用graphql的实例
2020/09/02 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
电话客服工作职责
2014/07/27 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2014年学校工会工作总结
2014/12/06 职场文书