解决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 相关文章推荐
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
jQuery插件的写法分享
Jun 12 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
js实现旋转木马效果
Mar 17 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
Vue Element plus使用方法梳理
Dec 24 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
新版PHP将向Java靠拢
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
英语专业推荐信
2013/11/16 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
九年级政治教学反思
2014/02/06 职场文书
《钱学森》听课反思
2014/03/01 职场文书
幼儿园家长寄语
2014/04/02 职场文书
股东合作协议书范本
2014/04/14 职场文书
青春励志演讲稿
2014/04/29 职场文书
文秘自荐信
2014/06/28 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫