vue 路由变化页面数据不刷新问题(缓存)
每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人。
问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页。
问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击
按钮,直接跳转到了如上第一张图的样子,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 路由变化页面数据不刷新问题(缓存)的更多相关文章
- VUE 路由变化页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致 ...
- vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...
- Vue-- 监听路由变化,数据无法更新?
之前写的Vue项目,有个问题困扰了好久.新闻板块有推荐.精华.最新等几个Tab,设想通过切换Tab,改变路由参数(get/news/:tab)去获取对应数据,然后渲染到页面(用的是同一套组件),问题来 ...
- vue路由在keep-alive下的刷新问题 对watch的影响
转载自:https://www.cnblogs.com/dansingal/p/8302100.html 问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新. 1 2 ...
- vue路由在keep-alive下的刷新问题
问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新. <transition name="fade" mode="out-in&q ...
- vue 路由更新页面视图未更新问题
最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的. vue-router的切换不同于传统的页面的切换.路由之间的切换,其实 ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- 微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: <!--pages/list/list.js--&g ...
- 【问题】VUE 同一页面路由参数变化,数据不刷新
依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数 ...
随机推荐
- 【朝花夕拾】Android性能篇之(二)Java内存分配
前言 在内存方面,相比于C/C++程序员,咱们java系程序员算是比较幸运的,因为对于内存的分配和回收,都交给了JVM来处理了,而不需要手动在代码中去完成.有了虚拟机内存管理机制,也就不 ...
- HTTP 权威指南 详解 ( 一、概述 )
HTTP 权威指南 详解 ( 一.概述 ) 最近在解读 <http权威指南> 这本书.之前对于http 的理解仅限于 知道我需要向服务端发送一个 get or post 请求,然后等待服务 ...
- MySQL使用过程中的报错处理(持续更新)
一.数据库初始化 1.Percona的MySQL 5.6.20版本数据库初始化 初始化命令(MySQL 5.6版本不适用mysqld命令进行初始化) ./scripts/mysql_install_d ...
- Mysql免安装版配置教程和常用命令图
Mysql免安装版配置教程 图文版 配置环境变量 新建一个my.ini文件,添加下面内容 [mysqld] basedir=C:\\software\Mysql\mysql-5.7.14-winx64 ...
- leetcode — minimum-depth-of-binary-tree
/** * Source : https://oj.leetcode.com/problems/minimum-depth-of-binary-tree/ * * * Given a binary t ...
- C#线程安全使用(三)
在讲CancellationTokenSource之前我决定先讲一下lock和Interlocked,如果能很好的理解这两个,再去理解CancellationTokenSource就会方便很多,由于我 ...
- [十二]JavaIO之BufferedInputStream BufferedOutputStream
功能简介 BufferedInputStream 和 BufferedOutputStream一样,他们都是过滤流 装饰器模式下具体的装饰类 用来装饰InputStream以及OutputStream ...
- 第36章 扩展授权 - Identity Server 4 中文文档(v1.0.0)
OAuth 2.0为令牌端点定义了标准授权类型,例如password,authorization_code和refresh_token.扩展授权是一种添加对非标准令牌颁发方案(如令牌转换,委派或自定义 ...
- Vs Code 插件配置教程
1 Vs Code 下载地址:https://code.visualstudio.com/ 2 安装好Vs Code,点击启动,点击File-> Open Folder 打开项目 3 点击E ...
- MySql 注意点
每条操作语句的结束都要加:(遇到:就会执行操作) DELIMITER 其实本身相当 :当存储过程中包含:的时候,就需要用 DELIMITER 来区分 我们会经常看到 DELIMITER $$ 或者DE ...