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");
### Vue.js 路由跳转页面缓存的实现方法 在 Vue.js 中,为了提升用户体验并减少不必要的重新渲染,在路由跳转过程中可以采用多种方式来实现在特定条件下保留组件实例的状态即页面缓存。 #### 使用 `keep-alive` 组件包裹动态组件 通过 `<keep-alive>` 标签可以让被包含在内的组件状态得以保存而不会因为切换导致销毁重建。对于需要缓存页面可以在定义路由配置项的候指定其是否应该被缓存: ```javascript const routes = [ { path: '/cachedPage', component: CachedComponent, meta: { keepAlive: true } // 设置此属性表示该页面会被缓存 } ]; ``` 当使用 `<router-view>` 显示上述路由对应的内容,则应将其置于 `<keep-alive>` 内部以便生效: ```html <template> <div id="app"> <!-- 缓存所有标记了meta.keepAlive=true 的路由 --> <keep-alive :include="cacheNames"> <router-view></router-view> </keep-alive> </div> </template> <script> export default { computed: { cacheNames() { return this.$route.matched .filter(record => record.meta && record.meta.keepAlive) .map(record => record.name); } } }; </script> ``` 这种方式下只有设置了 `meta.keepAlive` 属性为真的组件才会受到缓存机制的影响[^1]。 #### 结合 sessionStorage 进行路径管理 除了利用内置功能外还可以借助浏览器端存储技术如 `sessionStorage` 来辅助完成更加复杂的场景下的缓存逻辑控制。比如每次导航之前都将即将离开的位置信息暂存在本地,之后再依据实际情况决定是从历史记录恢复还是正常加载新地址[^3]: ```javascript // 添加全局前置守卫监听所有的导航事件 this.$router.beforeEach((to, from, next) => { if (from.meta.requiresAuth || to.path !== '/') { sessionStorage.setItem('prevPath', JSON.stringify(from)); } next(); }); // 当用户点击返回按钮或其他操作触发回退动作读取之前的记录 if (someConditionToGoBack) { const prevPathStr = sessionStorage.getItem('prevPath'); let prevPathObj; try { prevPathObj = JSON.parse(prevPathStr); } catch (_) {} if (prevPathObj) { router.push({ ...prevPathObj }); } } ``` 以上两种策略可以根据实际需求单独或组合运用以达到理想的页面缓存效果。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值