VUE跳转页面触发获取页面高度，获取高度为跳转前高度的解决方法

最新推荐文章于 2023-12-23 16:15:54 发布

原创最新推荐文章于 2023-12-23 16:15:54 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

WEBPACK/VUECLI3 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在页面元素完成跳转后获取其高度的方法。通过使用this.$nextTick()来确保DOM更新完毕后再执行获取高度的操作。

                    
                    原理：等待跳转执行完毕再执行高度获取
设置this.$nextTick(()=>{

//获取高度

})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TLROJE777

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue页面跳转实现页面缓存操作

10-15

同时，其他页面（如C页面）在跳转到B页面时将`shouldCache`设为`true`，以便在回退时保留B页面的状态。 4. **处理特殊情况**：有时，我们需要根据不同的来源页面决定是否缓存B页面。这时，可以利用Vuex来存储来源...

vue 列表页跳转详情页获取id以及详情页通过id获取数据

10-17

在使用Vue开发应用时，经常需要实现从列表页到详情页的页面跳转，并且在跳转的过程中获取到列表项的ID。这个ID会用于在详情页中根据ID来获取具体的资源信息，例如电影详情、商品详情等。为了实现这样的功能，通常...

参与评论您还未登录，请先登录后发表或查看评论

三种方法实现Vue路由跳转时自动定位在页面顶部

longlong729的博客

05-14

2079

在做Vue项目的时候发现当路由跳转时页面是不会自动跳转到顶部的而是停留在当前已滚动的距离实现方法其实很简单共有三种方法可实现页面自动跳转到顶部在路由的main.js(router.js)里添加如下代码即可：方法一： // 跳转后自动返回页面顶部 router.afterEach(() => { window.scrollTo(0,0); }) 方法二： const router = new VueRouter({ routes:[...],

VUE路由跳转记住滚动位置，返回时回到上次滚动位置

ly1363944642的博客

11-05

862

本解决方案原理是利用Keep-Alive、监听滚动事件与 watch中监听$route 实现。使用watch监听$route的方案适用于滚动区域在子组件中的情况。因为，beforeRouteLeave 路由导航守卫，只能作用在路由组件内，不能被路由组件内的子组件所触发。 vue-router文档截图如下：本样例使用element-ui 下的 el-table表格组件，原生或其他UI组件思路同理。 router.js { path: '/dispatchDetail', n

Vue第 9 篇，Vue页面重置和刷新（Vue数据重置）

NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）

11-24

1万+

⭐一. this.reload()方法（体验度好，无空白页面，相当于页面数据重置））二. 利用vue中的路由方法（偏向于刷新页面）三. 利用window的reload方法（强制刷新）

vue项目记录页面滚动条高度，再次返回该页面时自动滚动到当前高度

as965874的博客

04-08

1348

一、离开当前页面之前保存滚动条高度我的项目页面切换用到了elementUI的tabs组件,所以每次页面切换前都会调用beforeLeaveTab方法，故在该方法中保存离开页面时滚动条的高度。 beforeLeaveTab(tab, event) { //参数tab是要进入的页面的唯一值，event是要离开的页面的唯一值。 let _this = this // 存滚动条位置 if (_this.$el.querySelector('.tableQh'

vue 滚动定位、锚点跳转到指定元素位置scrollIntoView

未末的博客

01-11

2176

html <div v-for="(item,index) in xx" :key="index" :id="'audioTime1'+ Object.values(item)[1]"> </div> 滚动方法 // 滚动 goAnchor(selector) { // console.log(selector) // console.log(this.$el) //id的形式 this.$el.querySelector

vue跳转页面的几种方法(推荐)

10-15

本文将介绍Vue中实现页面跳转的几种方法，并通过实例代码帮助理解每种方法的用法。这些方法包括使用router-link进行声明式导航，使用this.$router.push()进行编程式导航，以及使用a标签进行外部链接跳转。同时，我们...

vue 解决form表单提交但不跳转页面的问题

10-16

本文将详细介绍如何在Vue中解决表单提交但不跳转页面的问题。首先，我们需要理解Vue中事件绑定的概念。Vue提供了`v-on`指令用于监听和处理DOM事件，例如表单的提交事件。`v-on`可以简写为`@`，所以`v-on:submit`...

使用vue-router切换页面时，获取上一页url以及当前页面url的方法

10-17

Vue Router提供了丰富的API和生命周期钩子，使得在页面切换过程中可以进行各种操作，比如获取上一个页面和当前页面的URL。在本文中，我们将深入探讨如何利用Vue Router的生命周期钩子`canActivate`和数据获取方法`...

VUE中重新加载页面

qq_37757270的博客

07-11

9413

有的时候我们会用到刷新页面重新加载的功能但是VUE并没有提供，可通过一下方法进行设置达到页面重新加载 1.首先在app.vue里的router-view里加入v-if=“isRouterAlive” <router-view v-if="isRouterAlive"/> 2.在data中进行配置 provide(){ return{ reload:this....

vue 计算页面高度

weixin_44134816的博客

04-25

892

【代码】vue 计算页面高度。

vue 父页面监听子页面值的变化

航仔的博客

12-23

967

首先，需要在父组件中定义一个自定义事件名称，然后将该事件与相应的处理函数关联起来。当子组件改变了其值时，就会调用这个处理函数。最后，父组件接收到事件后，会打印出新的值，并且还可以根据需求进行其他操作或者更新状态等。当子组件的输入框的值发生变化时，会触发。来触发自定义事件，同时也传递了新的值。事件，并指定了对应的处理函数。在Vue中，可以通过使用。来触发事件并传递数据。上述代码中，父组件通过。

前端常见面试题

DJxyyy的博客

09-27

579

前端常见面试题 1、响应式布局如何实现响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。方案一：百分比布局利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素；能够设置的属性有 width、height、padding、margin，其他属性比如 border、 font-size 不能用百分比设置的，先看一个简单例子：顶部是利用设置图片 width: 50%来适应不同的分辨率，由于原始图片高度不同，所以第一张图片顶部会有空白，这种情况最好两张图片宽高保持

Vue案例--点击按钮切换页面

qq_58167492的博客

10-11

4511

vue2做一个页面切换效果

VUE前端普通树形结构跳转

玉之之的博客

07-04

1472

按照需求，树形结构是从后端获取的数据结构得到后端的树形数据结构之后，前端的树形组件运用如下：

关于vue中height属性需要根据屏幕高度动态调整但是设为百分比不生效的解决办法

qq_24503157的博客

04-16

2442

关于vue中height属性需要根据屏幕高度动态调整但是设为百分比不生效的解决办法在Vue中项目中遇到height属性设为百分比但是不生效，却需要根据屏幕高度动态调整heignt属性的解决办法，使用vue watch监听，直接贴代码。 1.设置屏幕高度变量 2.在mounted计算属性中给屏幕高度变量赋值 3.使用watch监听屏幕高度变化并调整自己想要改变div中的高度这种方式仅针对于那种height属性百分比不生效，但是用具体的例如height:500px生效的结果 ...

Vue进阶（八十二）：updated 应用详解