vue中，实现锚点定位及跳转 url不发生变化

最新推荐文章于 2023-02-19 21:04:09 发布
原创 最新推荐文章于 2023-02-19 21:04:09 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍在Vue项目中遇到页面内锚点跳转导致URL变化的问题，并提供了解决方案：通过添加点击事件并使用JavaScript的scrollIntoView方法实现平滑滚动到目标位置。

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

在 vue中如果使用锚点进行同页面的跳转，url会受到影响，解决的办法是，
在点击的地方加一个点击事件，写document.querySelector(“要返回地方的id”).scrollIntoView(true)

Vue 项目中锚点定位实现
grootbaby
10-20 4404
要实现一个锚点定位的效果，传统方法是用 a 标签的 href 属性和 id 属性来做。 不过并不能达到想要的效果，在Vue项目中，使用传统的在a标签的href属性中写id的方法无效，会导致浏览器的地址改变从而跳转到其他页面。 vue-router 用的是 hash 模式，不能使用传统 a 标签的方式来做锚点定位。 经过各种百度，发现好多用的是以下方式，但是经过实测并没有用，没有实现定位。 （希望有大佬指导下） document.body.scrollTop = this.$el.queryS
vue项目 使用锚点定位 跳转到列表中特定的内容
weixin_52827704的博客
11-22 1323
需求：点击查看按钮后，页面跳转，新页面增加锚点定位，定位到列表中需要查看的内容 1，在页面中的列表上增加类名 highlight，比如： 2 增加样式 .highlight { .evaluate-content { background-color: #e6f1ff; outline: 2px solid #b3d4ff; } } 3.在data中增加：hashId: ‘’ 4.在生命周期中增加和移除监听器 在这里插入代码片 ...
vue中，实现锚点定位及跳转（url不发生变化）
热门推荐
阿乔姑娘的博客
06-25 1万+
直接上代码<div class="footer" @click="returnTop"> methods:{ returnTop:function(){ document.querySelector("#header").scrollIntoView(true); } }document.querySelector("要返回地方的id").scrollIntoV...
html锚点-不改变url(适用vue)
王楷鹏的博客
09-26 979
锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接 //需要锚点的元素 <div id="locationHerE">锚点</div> //引入jq <script type="text/javascript" src="/jquery/jquery.js"></script> //js代码 ...
解决锚点不改变url问题
月来better
02-19 285
解决锚点不改变url问题
vue项目中锚点定位替代方式
10-16
在Vue Router中，当url发生变化时，如果对应的路由组件没有进行配置或者处理，那么视图不会进行更新，导致页面不会跳转到指定的锚点位置。因此，第一次点击后URL虽然发生了变化，但是页面内容没有响应式的更新到锚点...
vue 实现锚点功能操作
10-14
Vue 中的无 URL 变化锚点定位 在某些情况下，你可能希望实现锚点定位而不改变 URL。这可以通过在 Vue 组件内监听滚动事件并手动滚动到目标元素来实现： ```html <div id="header"></div> ...
vue 实现a标签定位_vue实现锚点定位跳转（当前页面跳转，url不变）
weixin_39942397的博客
12-21 3023
今天介绍一种区别于标签跳转页面的用法。需求：当点击导航栏上的某一个菜单按钮时，快速跳转到当前页面指定的区域。image.png1、在产品介绍按钮上绑定一个click点击事件；产品介绍2、在你点击跳转的产品介绍详情区域的最外层div上添加一个id;3、在methods方法中写入以下代码；counter1() { //counter1是绑定的点击事件名称const returnEle = docum...
vue项目中锚链接的实现（保证url地址不发生变化）
weixin_43909743的博客
12-07 501
锚链接的实现 <span href="#file" style="color:#447BF8;cursor: pointer;" @click="returnFilePosition">查看详情</span> methods:{ returnFilePosition(){ // vue中锚链接问题 document.querySelector("#file").scrollIntoView(true); } } ...
vue-router URL里存在锚点导致不能再次跳转的可能解决办法
HermitSun的博客
07-19 2673
有时候我们会碰到这么一个场景：我们可能希望点击页面上的某个按钮，然后就会滚动到页面的某一块上，也就是所谓的“滚动到锚点”的功能。这个其实很好实现，vue-router的官方文档里已经给出了写法： const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash
Vue项目中使用锚点链接导致url发生改变
waouya的博客
12-09 561
Vue项目中使用锚点链接导致url发生改变的解决办法
vue a标签锚点跳转不改变路由的方式
小猪佩奇
01-07 1万+
第一种使用JS模式跳转: &lt;div id="header"&gt; &lt;div @click="goTop"&gt; methods:{ goTop(){ document.querySelector("#header").scrollIntoView(true); } } document.querySelector(“要返回地方的id”).scr...
vue下使用scrollIntoView()进行锚点跳转导致整个页面产生偏移的问题及解决办法
qq_41973957的博客
05-10 6781
vue下使用scrollIntoView()进行锚点跳转页面偏移问题及解决方案
页面点击锚点后不改变URL的方法
smile radiantly
02-23 3755
前端简单地锚点实现方法无非就是在把 a 标签的 href 写成想要跳到的元素的id ，比如点击<a href="#box"></a>页面就会自动滚动到 <div id="box"></div> 元素的位置。 这样会导致url会改变,浏览器默认的行为会将 id 放在 url 后面。比如：http://www.xxx.com#box 当存在多个锚点的时候...
vue用法总结（一） -- 如何去掉url默认的锚点#
三人行，必有我师焉。
08-23 3120
前言 vue项目中持续踩坑做一些记录，以便后面翻阅 项目的url中会自带#，看起来很不是舒服，其实是vue-router在搞怪，router跳转有两种实现方式：  1. hash（带#）值模式，vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载； history模式，如果不想要很丑的 hash，我们...
锚点跳转（vue）
lwx931449660的博客
10-15 1万+
第一种： 利用a标记的herf属性和id属性来完成跳转，a标记的herf属性值等于想要跳转去的div的id属性的值。 这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。 demo： <div class="headertab"> <div class="tab"> <a href="#1">基本信息&lt...
vue3 锚点定位
最新发布
04-28
### Vue3 中实现锚点定位功能 在 Vue3 中实现锚点定位功能可以通过多种方式完成，既可以利用原生 HTML 锚点机制，也可以通过 JavaScript 动态控制滚动行为。以下是基于引用中的方法以及 Vue 的特性所提供的解决方案...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值