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

下面我就为大家分享一篇解决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项目中如何引入icon图标

JavaScript中的E-mail 地址格式验证

javascript性能优化之分时函数的介绍

以上就是解决vue 路由变化页面数据不刷新的问题的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2753364.html

(0)
上一篇 2025年3月8日 06:36:33
下一篇 2025年3月8日 06:36:42

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    下面我就为大家分享一篇解决vue单页使用keep-alive页面返回不刷新的问题,具有很好的参考价值,希望对大家有所帮助。 使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体…

    编程技术 2025年3月8日
    000
  • vue 多入口文件搭建 vue多页面搭建的实例讲解

    下面我就为大家分享一篇vue 多入口文件搭建 vue多页面搭建的实例讲解,具有很好的参考价值,希望对大家有所帮助。 红色为更改后的不同之处 vue 多入口文件搭建 在webpack.base.conf 立即学习“前端免费学习笔记(深入)”;…

    2025年3月8日 编程技术
    200
  • vue移动UI框架滑动加载数据的方法

    这篇文章主要介绍了vue移动ui框架滑动加载的方法,现在分享给大家,也给大家做个参考。 前言 在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简…

    2025年3月8日
    200
  • React-Router中Url参数如何处理页面不刷新

    这次给大家带来React-Router中Url参数如何处理页面不刷新,React-Router中Url参数处理页面不刷新的注意事项有哪些,下面就是实战案例,一起来看一下。 问题 今天在写页面的时候发现一个问题,就是在React Router…

    编程技术 2025年3月8日
    200
  • vue与vue-i18n结合实现后台数据的多语言切换方法

    下面我就为大家分享一篇vue与vue-i18n结合实现后台数据的多语言切换方法,具有很好的参考价值,希望对大家有所帮助。 在XXX.js文件中定义函数: getUser(context,info){  context.$http.get(S…

    编程技术 2025年3月8日
    200
  • 改变vue请求过来的数据中的某一项值的方法

    下面我就为大家分享一篇改变vue请求过来的数据中的某一项值的方法(详解),具有很好的参考价值,希望对大家有所帮助。 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items…

    编程技术 2025年3月8日
    200
  • Vue中v-for的数据分组实例

    下面我就为大家分享一篇vue中v-for的数据分组实例,具有很好的参考价值,希望对大家有所帮助。 使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到…

    2025年3月8日
    200
  • 如何利用webpack构建多页面应用

    这次给大家带来如何利用webpack构建多页面应用,利用webpack构建多页面应用的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 之前使用 vue2.x + webpack3.x 撸了一个 vue 单页脚手架 vue 版 spa…

    编程技术 2025年3月8日
    200
  • Vue 父子组件数据传递方式汇总

    这次给大家带来Vue 父子组件数据传递方式汇总,Vue 父子组件数据传递的注意事项有哪些,下面就是实战案例,一起来看一下。 当我们在书写 vue 组件的时候,也许可能会用到数据传递;将父组件的数据传递给子组件,有时候也需要通过子组件去事件去…

    2025年3月8日 编程技术
    200
  • 怎样使用Vue在页面右上角实现可悬浮/隐藏菜单

    这次给大家带来怎样使用Vue在页面右上角实现可悬浮/隐藏菜单,使用Vue在页面右上角实现可悬浮/隐藏菜单的注意事项有哪些,下面就是实战案例,一起来看一下。 这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或…

    2025年3月8日
    200

发表回复

登录后才能评论