温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何解决vue路由变化页面数据不刷新的问题

发布时间:2021-07-21 10:38:51 来源:亿速云 阅读:181 作者:小新 栏目:web开发

这篇文章给大家分享的是有关如何解决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路由变化页面数据不刷新的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI