VUE怎么解决路由跳转时及跳转到外部链接,再返回的页面缓存问题

本地路由跳转时,可以在app.vue中加入以下代码,即可解决本地路由跳转时的缓存问题

<keep-alive include="Movie,Music,Test">
      <router-view></router-view>
    </keep-alive>

但是当跳转到外部链接时(不是本地项目)如百度,再返回时路由缓存就不管用啦,这不是vue的问题,是浏览器的问题,怎么解决这种情况呢?(记录下自己的心路历程)

  • 第一种方法 用axios访问百度,但前提是解决跨域问题,网上有很多方法,但我一个都没成功,我太菜啦
  • 第二种方法 本来我是打算在后端上记录路由跳转的数据,返回时再把这些数据传回来(VUE就是基于数据的)但发现这有悖前后端分离的初衷,前后端又掺杂在啦一起,那咋办呢,后来灵光一动,我为嘛不打开个新的标签页呢? 哈哈,打开新标签页,本页面不关闭,不就不用返回,这不就解决缓存问题啦

打开新标签页的代码

 window.open("http://www.baidu.com","_blank");
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3中,可以通过使用keep-alive组件和导航钩子函数来实现路由跳转页面数据缓存。首先,在路由中设置需要缓存页面,并使用keep-alive组件将其包裹起来。可以使用v-if指令来判断哪些页面需要缓存,为true的是需要缓存的,false是不需要缓存的。这是第一步。 然后,在需要缓存页面设置导航钩子函数beforeRouteUpdate。这个钩子函数可以在每次路由更新之前执行,并在回调中执行需要数据更新的业务逻辑。例如,可以在这里重新发送分类数据接口请求,以更新页面数据。 综上所述,以上是实现Vue3路由跳转页面数据缓存的方法。通过使用keep-alive组件和导航钩子函数,可以在页面之间实现数据的缓存和更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue页面跳转实现页面缓存操作](https://download.csdn.net/download/weixin_38673924/13128304)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue3-解决路由缓存问题-方案一:使用key;方案二:使用onBeforeRouteUpdate](https://blog.csdn.net/qq_45811054/article/details/130948701)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值