解决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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 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
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
JS event使用方法详解
2008/04/28 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
通过C++学习Python
2015/01/20 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
店长岗位职责
2013/11/21 职场文书
公司承诺书格式
2014/05/21 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
个人合伙协议书范本
2014/10/14 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL