解决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 跳转代码集合
Dec 03 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
一种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/07/16 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JS解析XML实例分析
2015/01/30 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
JS验证字符串功能
2017/02/22 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python 含参构造函数实例详解
2017/05/25 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python画微信表情符的实例代码
2019/10/09 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
美术国培研修感言
2014/02/12 职场文书
幼儿园家长寄语
2014/04/02 职场文书
公司授权委托书
2014/10/17 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
企业整改报告范文
2014/11/08 职场文书
资产移交协议书
2016/03/24 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书