vue 路由缓存点击下一页返回之前的页面在原先的滚动位置

最新推荐文章于 2024-05-10 10:51:57 发布

我一直在路上

最新推荐文章于 2024-05-10 10:51:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44356616/article/details/103785599

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue应用中使用keep-alive组件进行路由缓存，保持页面滚动位置不变，通过设置特定的组件名实现页面状态持久化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 路由缓存点击下一页返回之前的页面在原先的滚动位置

1. app.vue

<template>
  <div class="app" id="app">
  <!-- transition 是我这里的路由过渡动画 -->
    <transition :name="transitionName">
    	<!-- include 缓存路由 -->
      <keep-alive :include="aliveComponent">
        <router-view style="height:100%;position: ;width:100%;" class="view app-view"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
export default {
  name: 'app',
  data(){
    return {
      transitionName:'',
      aliveComponent:['dailyList', 'weeklyList']	//这是两个需要缓存的路由，绑定到 keep-alive 标签上
    }
  },
 }

2. 在要缓存的组件内（另一个缓存的组件同样的方法）

<template>
	<!--定义类为 weeklyList 然后在下面赋值即可 -->
    <div class="weeklyList">
        <div>内容</div>
    </div>
</template>
<script>
export default {
    name: "weeklyList" //给类赋值，不赋值不会有效
}
</script>