首页 > 其他分享 >vue3 路由页面返回时,恢复滚动条位置

vue3 路由页面返回时,恢复滚动条位置

时间:2023-05-08 20:34:45浏览次数:46  
标签:scrollRef vue3 value 滚动条 vue import scrollTop ref 路由

首先,路由必须是KeepAlive模式

<script setup lang="ts">
import { onActivated } from "vue";
import { onBeforeRouteLeave } from "vue-router";


import { ref } from "vue"

const scrollRef = ref(<HTMLElement><unknown>null)
const scrollTop = ref(0)

onActivated(()=>{
    console.log("恢复滚动:" , scrollTop.value);
    scrollRef.value.scrollTop = scrollTop.value;
})
onBeforeRouteLeave((to, from, next)=>{
  scrollTop.value = scrollRef.value.scrollTop;
  next();
})

</script>

<template>
    	<div class="medalContainer" ref="scrollRef">
            <div class="row" v-for="index in 20">
                <img src="@/assets/medal.svg" />
                <img src="@/assets/medal.svg" />
                <img src="@/assets/medal.svg" />
                <img src="@/assets/medal.svg" />
                <img src="@/assets/medal.svg" />
            </div>
        </div>
</template>

<style scoped>
.medalContainer {
    overflow-x: hidden;
    overflow-y: auto;
}
</style>

标签:scrollRef,vue3,value,滚动条,vue,import,scrollTop,ref,路由
From: https://www.cnblogs.com/IWings/p/17383019.html

相关文章

  • 路由控制
    Django的路由系统Django1.11版本URLConf官方文档URL配置(URLconf)就像Django所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表。你就是以这种方式告诉Django,对于这个URL调用这段代码,对于那个URL调用那段代码。URLconf配置基本格式:fromdjango.conf......
  • Cisco 思科路由交换-开启telnet
    Router>enable   进入特权模式Router#configterminal  进入全局模式Router(config)#hostnamer1  路由器修改名字r1(config)#noipdomain-lookup   取消dns查询r1(config)#linevty04          开启telnetr1(config-line)#password123  设置密码 ......
  • el-scrollbar elementui 滚动条
    参考:https://www.jb51.net/article/245065.htmel-scrollbar滚动条,文档中没有<el-scrollbarstyle="height:100%"><!--滚动条要包裹的内容--><divclass="container">占位</div></el-scrollbar> ......
  • vue3 多级数据下拉选择组件
    若依的下拉组件太复杂,我改了一下,希望对大家有帮助,基于element-plusel-tree-select组件:举个栗子,TreeSelect.vue:<template><div><el-tree-selectstyle="width:100%"v-model="valueId"id="tree-option"ref="s......
  • vue3 通过fuse.js 实现前端模糊查询
    在项目中写好多个查询组件,基于element-plusel-select组件:举个栗子,SelectAllCompany.vue:<template><!--获取客户下拉数据,type0有限公司--><el-selectv-model="current":multiple="multiple"remote:remote-method="querySearch":suff......
  • vue3 证件识别上传组件封装
    证件图片识别上传根据业务需要,经常涉及到证件上传,例如身份证上传、银行卡、营业执照等信息,根据设计师的设计,单独封装了一个上传组件。识别接口后端用的是阿里云的。上传组件用的是element-plusel-upload上代码:<template><divclass="component-upload-image"><el-up......
  • 列表的批量操作组件封装 + 权限 ,如何更优雅的实现呢?Vue3
    这个组件解决的问题?在以往的项目当中,我从未想过要对批量/列表数据的操作按钮做什么变动,直到最近的一次开发,让我突然觉得可以将操作按钮也做成一个公共组件,在做前端开发时,更加专注于js代码逻辑。如何使用?全局(main.js中)引用操作组件BatchOperation.vue创建页面操作按钮act......
  • Solon 路由的 Url 大小写匹配与事项注意
    Solon路由器对url的匹配默认是“忽略大小写”的。如果有需要,可以强制开启:v2.2.14后支持@SolonMainpublicclassApp{publicstaticvoidmain(Stringargs){Solon.start(App.class,args,app->{app.router().caseSensitive(true);//或许以......
  • Vue.js:Vue-Router动态路由从服务器接口获取路由数据
    (目录)文档https://v3.router.vuejs.org/zh/installation.html版本号"vue":"2.6.10","vue-router":"3.6.5",有几种方式实现动态路由:前端配置完整路由,通过接口返回的数据判断是否可显示,是否可访问前端配置部分路由,由后端接口返回的数据生成新路由抛开路由的思维,是否......
  • VueUse 是怎么封装Vue3 Provide/Inject 的?
    Provide/InjectProvide和Inject可以解决Prop逐级透传问题。注入值类型不会使注入保持响应性,但注入一个响应式对象,仍然有响应式的效果。Provide的问题是无法追踪数据的来源,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个......