解决vue项目跳转同样的页面不刷新的问题思路详解

 更新时间:2023年09月05日 11:36:27   作者:前端菜鸟好先森  
做公司官网项目的时候遇到的场景,顶部导航栏分类商品跳转到分类详情,然后在分类详情再次点击顶部导航栏里另外的分类商品,跳到同样的页面数据不刷新,下面小编给大家分享解决方式,关于vue跳转不刷新问题感兴趣的朋友一起看看吧

做公司官网项目的时候遇到的场景,顶部导航栏分类商品跳转到分类详情,然后在分类详情再次点击顶部导航栏里另外的分类商品,跳到同样的页面数据不刷新

解决方式:

第一种:给router-view添加唯一key  

 

也可以用return this.$route.path + Math.random();随机数

这样根据key值可实现重复跳转一个路由实现路由刷新的效果。

第二种:

在watch中监听路由变化

 对router进行监控,当router发生变化时,执行初始化界面方法

总结:我思路有两种,一种是每个路由的参数都不一致(随机),第二种 每次跳到这个页面的时候监听路由的变化

到此这篇关于解决vue项目跳转同样的页面不刷新的问题的文章就介绍到这了,更多相关vue跳转不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue + Elementui实现多标签页共存的方法

    Vue + Elementui实现多标签页共存的方法

    这篇文章主要介绍了Vue + Elementui实现多标签页共存的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue嵌套iframe时$router.go(-1)后退bug的原因解析

    Vue嵌套iframe时$router.go(-1)后退bug的原因解析

    这篇文章主要介绍了Vue嵌套iframe,$router.go(-1)后退bug的问题原因及解决方法,本文给大家分享问题原因所在及解决方案,需要的朋友可以参考下吧
    2023-09-09
  • Vue中Keep-Alive缓存组件使用语法及原理深度解析

    Vue中Keep-Alive缓存组件使用语法及原理深度解析

    keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,这篇文章主要介绍了Vue中Keep-Alive缓存组件使用语法及原理,需要的朋友可以参考下
    2024-07-07
  • vant-ui AddressEdit地址编辑和van-area的用法说明

    vant-ui AddressEdit地址编辑和van-area的用法说明

    这篇文章主要介绍了vant-ui AddressEdit地址编辑和van-area的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 浅谈Vuex@2.3.0 中的 state 支持函数申明

    浅谈Vuex@2.3.0 中的 state 支持函数申明

    这篇文章主要介绍了浅谈Vuex@2.3.0 中的 state 支持函数申明,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 一文教会你如何在npm上传自己的包

    一文教会你如何在npm上传自己的包

    作为一个前端开发者,我们要学会自己编写一些开发工具模块,也可以自己编写一些组件,甚至可以通过自己的能力编写一个框架出来,这都需要我们能够灵活的管理我们的包,下面这篇文章主要给大家介绍了关于如何通过一文教会你在npm上传自己的包的相关资料,需要的朋友可以参考下
    2023-03-03
  • 详解vue-cli脚手架中webpack配置方法

    详解vue-cli脚手架中webpack配置方法

    这篇文章主要介绍了详解vue-cli脚手架中webpack配置方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • mpvue中使用flyjs全局拦截的实现代码

    mpvue中使用flyjs全局拦截的实现代码

    这篇文章主要介绍了mpvue中使用flyjs全局拦截的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue Getters和mapGetters的原理及使用示例详解

    Vue Getters和mapGetters的原理及使用示例详解

    Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我们要深入探讨其中一个关键部分:getters,以及它的相关辅助函数mapGetters,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • vue 单元测试的推荐插件和使用示例

    vue 单元测试的推荐插件和使用示例

    单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码,使得添加新功能和追踪问题更容易。Vue 的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现,并帮助其他开发者理解你的组件的作用。
    2021-06-06

最新评论