解决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 06 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
JavaScript创建对象的写法
2013/08/29 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
浅谈js中的闭包
2015/03/16 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
python 操作hive pyhs2方式
2019/12/21 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
单位工作证明范文
2014/09/14 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
python - timeit 时间模块
2021/04/06 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android