vue3结合 vue-router和keepalive实现路由跳转保持滚动位置不改变（超级简易清晰）

已于 2024-09-26 11:29:34 修改
阅读量896 收藏
点赞数 6
分类专栏： vue3 web前端 前端-tools 文章标签： vue.js 前端 javascript
于 2024-09-26 11:09:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63324578/article/details/142550990
版权

1.首先我们在路由跳转页面设置keepalive(Seeall是我想实现结果的页面)

2. 想实现结果的页面中如果不是全屏实现滚动而是有单独的标签实现滚动效果

Vue3-43-组件- 组件状态保持 KeepAlive 的简单使用
northcastle的博客
01-08 1624
vue3 中 使用 KeepAlive 缓存组件状态
Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法
共同学习，共同成长
06-24 2513
大家好，我是码喽的自我修养！今天给大家分享【Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法】，超详细讲解！
[Vue] 路由切换后页面滚动位置不变的解决方法
cargelzhong的博客
08-29 6849
vue切换路由，$router.push的时候页面到顶端的滚动距离仍会保持不变。 解决办法很简单，如下，直接监测watch路由变化，然后将body的滚动距离scrollTop赋值为0。 1 2 3 4 5 6 7 8 export default {   watch:{    '$route'...
Vue 3 中 keep-alive 的使用及注意事项
最新发布
大樊子的博客
04-16 1755
keep-alive是 Vue 内置的一个抽象组件，用于缓存不活动的组件实例，避免重复渲染，提高性能。
【Vue3】vue3的keepAlive保存滚动位置
此人太懒，没有任何简介
12-18 1065
vue3的keepAlive保存滚动位置
Vue3：返回组件（运用keepAlive保留滚动位置）
米拉
09-16 7907
this.$router.go(-1) 返回上一页最简单实用，现通过路由传参及keepAlive，实现返回保留滚动条位置。注意这两个activated 和 deactivated 这两个生命周期钩子函数。
Vue路由切换后, 页面滚动位置不变BUG处理
wxl1390的博客
12-16 2005
问题描述: 在路由a的时候，滚动页面到x的位置，此时直接跳转路由b，会发现b页面竟然页停留在x的位置！ 解决方案①:监听路由 直接在app.vue监测路由变化, 让body的滚动距离scrollTop=0/ scrollTo(0,0) export default { watch: { $route: function(to, from) { window.scrollTo(0,0); //document.body.scrollTop = 0; //doc
Vue-Router实现带参数跳转，并且保存原页面数据记录
weixin_61933613的博客
03-07 2485
摘要：Vue项目中有个小需求，从A页面带多个参数跳转到B页面，B页面使用出入参数查询并显示，同时再次切换到A页面时依然记忆原有的数据。
vue3项目keepAlive使用方法详解
热门推荐
蓑笠翁
11-07 4万+
一、介绍 keepalive是Vue的内置组件，作用是将组件缓存在内存当中，防止重复渲染DOM，属于消耗内存获取速度。常用的用法是将组件或者路由缓存，现有的用法vue2.x与vue3.x有部分差别。以下主要将keepaliev在vue3.0中的用法。 二、使用 通常我们可以配置整个页面缓存或只让特定的某个组件保持缓存信息，配置了keepalive的路由或者组件，只会在页面初始化的时候执行created->mounted生命周期，第二次及以后再进入该页面将不会执行改生命周期，而是会去读取缓存信息。 1、
Vue中keep-alive 实现后退不刷新并保持滚动位置
10-15
总结来说，Vue中的`<keep-alive>`组件结合`activated`和`deactivated`生命周期钩子，可以实现后退不刷新并保持滚动位置的效果。同时，通过路由的`meta`属性，我们可以灵活控制哪些组件需要被缓存。通过这样的方式，...
vue使用keep-alive保持滚动条位置的实现方法
10-17
首先，要实现滚动条位置的保持，我们需要在路由跳转时记录滚动条的位置，再在页面重新进入时恢复之前保存的位置。为此，我们可以利用Vue的<keep-alive>组件的特性，以及路由元信息（meta）来实现这一功能。 在Vue...
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
react-keepalive-router:基于react 16.8 +开发的react缓存组件，react router 4 +可用于缓存页面组件，类似于Vue keepalive包Vue路由器效果功能。（基于react 16.8 +，react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的Keepalive包装vue-router的效果功能）
03-18
react-keepalive-router 一介绍 基于react 16.8+ ， react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的keepalive封装vue-router的效果功能。 采用react hooks全新api ，支持缓存路由，手动解除...
vue3 记录页面滚动条的位置，并在切换路由时存储或者取消
lzfengquan的博客
04-01 2087
需求，当页面内容超出了浏览器可是屏幕的高度时，页面会出现滚动条。当我们滚动到某个位置时，操作了其他事件或者跳转了路由，再次回来时，希望还在当时滚动的位置。那我们就进行一下操作。利用 @scroll=“handleScroll” 事件进行操, 定义的ref 获取dom。4.路由守卫 beforeRouteLeave路由离开前记录当前的位置。我这里获取的是元素本身的滚动条事件，可不是 window的滚动条事件。注意我们需要给元素的最外层父级元素设置。3.每次进入都要将存储的位置重新赋值给页面。
vue3 组件，路由，KeepAlive
qiulei_21的专栏
04-28 516
共解决三个问题，详细参见文中所述。
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 1万+
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
vue3 keep-alive
langyalaoa的博客
08-27 352
<template> <router-view v-slot="{ Component }"> <keep-alive :include="includeList"> <component :is="Component"></component> </keep-alive> </router-view> </template> <script> export d.
Vue3 keep-alive
qq_45438471的博客
04-24 9350
Vue3中的keep-alive可以用于优化组件渲染的性能。例如，在一个页面中，有一些组件不需要每次访问时都重新渲染，可以使用keep-alive将这些组件缓存起来，只在第一次或数据变化时渲染更新。这样做可以减少组件的重复渲染，提高页面的响应速度。同时，keep-alive也可以用于处理一些需要缓存的数据，例如用户登录状态等。   本文主要介绍Vue3中keep-alive的使用。
vue3中router-view包裹keepalive结合使用
11-15
在 Vue 3 中，`<router-view>` 和 `v-slot:default` 结合 `keep-alive` 组件可以有效地管理动态组件的缓存和复用，提高性能。当你有大量相似但需要独立状态的组件，并希望它们在切换时不每次都重新渲染时，这非常有用。 1. **`router-view`**：这是 Vue Router 的核心组件，用于显示当前路由对应的组件内容。 2. **`keep-alive`**：Vue 提供的内置组件，它让动态组件在条件改变前保持在内存中，避免不必要的重新渲染。 3. **结合使用**：将 `keep-alive` 包裹在 `<router-view>` 内部，然后给 `keep-alive` 设置一个 `v-slot:default`，这样每个进入的组件都会被视为一个单独的“活”实例。当用户导航到另一个组件时，离开的那个组件会被缓存在 keep-alive 中，直到再次访问。 ```html <template> <div> <keep-alive> <slot name="default"></slot> </keep-alive> </div> </template> <script> export default { components: { YourComponentA, YourComponentB, // 其他组件... }, // 如果你想缓存特定的组件，可以这样引用 <template v-slot="{ component, route }"> <component :is="route.name" :key="route.path" /> </template> }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值