vue页面锚点定位刷新界面空白问题解决

最新推荐文章于 2024-02-01 19:32:55 发布

yunqianzyl

最新推荐文章于 2024-02-01 19:32:55 发布

阅读量353

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/yunqianzyl/article/details/132763350

版权

当页面使用锚点定位后，在刷新页面时锚点不刷新，如

如上图，刷新后“/产品特点”的锚点并未消失，而刷新的第一时间，页面中该锚点的块并未加载完成，导致系统找不到该锚点，从而出现页面空白

解决方法：

在mounted中加上 window.location.hash = '/'

刷新后将锚点重置即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yunqianzyl

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue中局部页面跳转_vue使用感受（二）组件间跳转

weixin_35786588的博客

01-12

1816

想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看。昨天我们聊了一下vue的组件间传值，今天来讨论下我遇到的第二个问题组件间跳转。在不使用前端框架的时候，如果我们要点击菜单跳转到指定页面，一般来说可以使用标签或者在页面中嵌套iframe。前者可以改变页面路径或者通过锚点来跳转到页面指定位置，后者则是在页面中嵌套一个子页面，可以部分刷新，改变内容。不过HTML5已经不再支持if...

5 Vue＋html css 问题（西安10.9）

harvestUachieve的博客

10-10

1278

数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。

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

vue 点击锚点后手动刷新页面,显示空白

weixin_53587375的博客

09-13

1210

1、a标签锚点链接后，手动刷新页面显示空白 <li v-for="(item, index) in listTow2" :key="index" :class="{ current: index == isActive2 }" @click="check(index)" > <div class="yinying">

Vue项目中使用锚点链接导致url发生改变

waouya的博客

12-09

486

Vue项目中使用锚点链接导致url发生改变的解决办法

解决锚点定位刷新页面的问题

归零

12-31

7161

使用vue-cli实现锚点定位时，由于定位后会在url中加入hash，所以如果刷新页面路由会找到该页面，但是，由于该页面实际上是不存在的，所以页面会显示空白，而想实现的方法是刷新后重新载入的是首次进来的页面，具体的方法实现如下： ...

vue下使用scrollIntoView()进行锚点跳转导致整个页面产生偏移的问题及解决办法

qq_41973957的博客

05-10

5925

vue下使用scrollIntoView()进行锚点跳转页面偏移问题及解决方案

VUE解决锚点刷新问题

weixin_45563734的博客

12-28

1408

VUE解决锚点刷新问题 // 子页面 // 子页面按钮 <div style="padding-top: 20px;"> <el-button type="danger" @click="jumpConsole3">Started</el-button> </div> // 调用父页面方法 methods: { jumpConsole3() { this.$parent.selfFun() } } //

vue3页面跳转产生白屏，刷新后能正常展示的解决方案

weixin_45288172的博客

02-01

3616

vue3页面跳转产生白屏，刷新后能正常展示的解决方案

Vue路由与a标签链接锚点发生冲突

小破孩的博客

09-17

3187

近期在vue项目中，使用了a标签锚点定位对应内容的时候发现路由也发生了变化，此时如果去刷新页面则会出现找不到页面的情况。如果直接使用下面的方法进行锚链接，会导致路由变成xxx，这样显然不是我们需要的 <a href="#xxx"></a> <div id="xxx"></div> 我们可以采用下面方法进行解决： <a @click.prevent="anchor('comment')">点击我跳转至comment</a>

Vue高级知识概括

weixin_41005188的博客

07-20

1952

【Vue学习笔记_15】Vue Router前端路由

weixin_44752429的博客

11-28

620

【Vue学习笔记_15】Vue Router前端路由前端路由发展历史后端渲染后端路由前端渲染（前后端分离）前端路由（单页面富应用）vue-router基本使用默认路由使用HTML5的history模式router-link属性补充通过js代码跳转路由vue-router动态路由路由的懒加载嵌套路由vue-router参数传递paramsquery导航守卫keep-alive 配套可执行代码示例 => GitHub 前端路由发展历史路由：通过互联的网络把信息从源地址传输到目的地址的活动路由器提供了两

vue-router详解

Chil_G的博客

09-15

645

目录认识路由 vue-router基本使用 vue-router嵌套路由 vue-router参数传递 vue-router导航守卫 keep-alive 认识路由什么是路由？说起路由你想起了什么？路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛. 路由器是做什么的? 你有想过吗? 路由器提供了两种机制: 路由和转送. 路由是决定数据

antdesign-vue 锚点使用的坑

weixin_50249353的博客

12-21

666

这是因为 for循环应该写在子组件a-anchor-link上而不是写在a-anchor上所以出错了。绑定点击事件使用这句话可以解决 e.preventDefault()2 循环渲染anchor-link，只显示最后一个。1 刷新后会调转到对应的链接处。

vue中使用锚点

true_peng的博客

03-23

2827

一想到做锚点跳转，我都是用a标签加唯一id属性来实现跳转，但是这样有个弊端，vue的路由会在地址上带上id，当每次刷新页面的时候就会出现空白。所以只能通过js来控制跳转。 <li> <a href="javascript:void(0)" @click="goAnchor('About')">About</a> </li> goAnchor(e) { var id = "#" + e; document.querySelec

anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用

weixin_31043675的博客

12-23

370

如下所示：export default {inserted: function(el, binding) {el.onclick = function() {let total;if (binding.value == 0) {total = 0;} else {total = document.getElementById(`anchor-${binding.value}`).offsetTop...

解决Vue刷新页面白屏问题

qd1014751893的博客

04-19

1624

vue刷新页面方式，vue白屏问题

vue 按钮没触发事件但是刷新也没了_手写Vue-router核心原理，再也不怕面试官问我Vue-router原理...

weixin_32009069的博客

02-03

241

# 手写vue-router核心原理@[toc]## 一、核心原理### 1.什么是前端路由？在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。### 2.如何实现前端路由？要实现前端路由，需要解决两个核心：1. 如何改变 URL 却不引起页面刷新...

导致VUE页面不刷新的几种情况以及解决方法

qq_30258721的博客

08-30

6922

参考文献 https://segmentfault.com/a/1190000022772025 1.Vue 无法检测实例被创建时不存在于 data 中的 property 原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。场景： var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{

vue-router URL里存在锚点导致不能再次跳转的可能解决办法

HermitSun的博客

07-19

2406

有时候我们会碰到这么一个场景：我们可能希望点击页面上的某个按钮，然后就会滚动到页面的某一块上，也就是所谓的“滚动到锚点”的功能。这个其实很好实现，vue-router的官方文档里已经给出了写法： const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash

vue2锚点定位插件