解决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 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
详解node中创建服务进程
May 09 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
html5调用摄像头截图功能
Jan 18 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 数组教程 定义数组
2009/10/23 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python深入学习之内存管理
2014/08/31 Python
Python中查看文件名和文件路径
2017/03/31 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python下简易的单例模式详解
2019/04/08 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
大学班长的职责
2014/01/27 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
网吧消防安全责任书
2014/07/29 职场文书
通知函格式范文
2015/04/27 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
如何在Python中创建二叉树
2021/03/30 Python