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

 更新时间:2018年03月13日 08:44:36   作者:毛毛-lucy  
下面小编就为大家分享一篇解决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响应式添加、修改数组和对象的值

    Vue响应式添加、修改数组和对象的值

    有些时候,不得不想添加、修改数组和对象的值,但是直接添加、修改后又失去了getter、setter,由于JavaScript的限制, Vue不能检测以部分变动的数组
    2017-03-03
  • vue2 v-model/v-text 中使用过滤器的方法示例

    vue2 v-model/v-text 中使用过滤器的方法示例

    这篇文章主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue打包后生成一个配置文件可以修改IP

    vue打包后生成一个配置文件可以修改IP

    本文主要介绍了修改Vue项目运行的IP和端口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vant组件库之tag渐变色不起作用的原因及解决

    vant组件库之tag渐变色不起作用的原因及解决

    这篇文章主要介绍了vant组件库之tag渐变色不起作用的原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目中swiper轮播active图片实现居中并放大

    vue项目中swiper轮播active图片实现居中并放大

    这篇文章主要介绍了vue项目中swiper轮播active图片实现居中并放大方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue element ui validate 主动触发错误提示操作

    vue element ui validate 主动触发错误提示操作

    这篇文章主要介绍了vue element ui validate 主动触发错误提示操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue使用Echart线柱混合图排坑记录

    vue使用Echart线柱混合图排坑记录

    这篇文章主要为大家介绍了vue使用Echart线柱混合图排坑记录,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • vue 插槽简介及使用示例

    vue 插槽简介及使用示例

    这篇文章主要介绍了vue 插槽简介及使用示例,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vue项目中如何配置src文件下的@别名

    Vue项目中如何配置src文件下的@别名

    这篇文章主要介绍了Vue项目中如何配置src文件下的@别名问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 浅谈Vue3.0新版API之composition-api入坑指南

    浅谈Vue3.0新版API之composition-api入坑指南

    这篇文章主要介绍了Vue3.0新版API之composition-api入坑指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论