VUE—跨页面锚点（nuxt同样适用）

最新推荐文章于 2024-06-28 01:05:34 发布

Poppy_LYT

最新推荐文章于 2024-06-28 01:05:34 发布

阅读量1.1k

点赞数 1

分类专栏： VUE 文章标签： vue.js nuxt 跨页面锚点

本文链接：https://blog.csdn.net/poppy_lyt/article/details/119995904

版权

本文介绍如何在Vue及Nuxt应用中实现在a页面点击后跳转到b页面的相应位置，详细阐述了a页面和b页面的设置方法。

摘要由CSDN通过智能技术生成

a页面点击某个位置跳转到b页面的相对应的位置

1、a页面

<nuxt-link to="/bpage#c"></nuxt-link><router-link to="/bpage#c"></router-link>
<nuxt-link to="/bpage#d"><

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Poppy_LYT

关注关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

王佳斌

08-22

5092

vue3，nuxt3，锚点，锚点定位，跳转到指定位置，锚点定位跳转，添加锚点，锚点滚动过程怎么加入动画，过渡效果，anchor，导航锚点联动，滚动监听和点击平滑滚动跳转实例，页面内跳转锚点的使用，跨页面锚点跳转，锚点滚动，定位滚动，实现锚点定位以及平滑滚动到指定位置，动态锚点定位，页面滚动和点击菜单联动效果，根据文章浏览位置，目录高亮相应标题，锚点定位的目录，竖向滚动条效果并实现锚点定位跳转，滚动与导航联动，导航栏绑定内容锚点+滚动动画，vue3锚点平滑滚动，如何设置描点跳转到对应页面，菜单绑定内容锚点滚动

nuxt-page-transition-and-anchor-handler:在页面过渡之前滚动到顶部，处理锚链接，并在页面之间交叉溶解

05-03

nuxt页面转换和锚点处理程序该软件包使用将动画滚动添加到所有锚点链接。它还添加了一个默认的交叉溶解页面过渡，感觉比普通的Nuxt out-in过渡快。当您执行Install的第二步时，此方法效果最佳，使页面在过渡开始之前滚动到顶部。安装 yarn add nuxt-page-transition-and-anchor-handler或npm install nuxt-page-transition-and-anchor-handler 将nuxt-page-transition-and-anchor-handler到modules数组如果您需要支持不支持浏览器，则可以进行。选项可以通过模块或在ptah键下的配置文件中进行设置。 css （ true ）-包括默认的过渡样式（请参见transition.css ） scrollToTopBeforePageChange

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

解决Nuxt(Vue)中跨页面锚点不定位的问题

栈斗民族的博客

04-09

1913

方法① 在有锚点的页面添加代码： methods: { goAnchor(selector) { // 最好加个定时器给页面缓冲时间 setTimeout(() => { // 获取锚点元素 let anchor = this.$el.querySelector(selector) anchor.scrollIntoView() }, 50...

Nuxt3：当前页面滚动到指定位置

最新发布

一些平时在开发过程中遇到的常见问题，分享给大家

06-28

416

在Nuxt 3中，如果你想让当前页面跳转到指定位置，可以使用scrollIntoView方法。你需要给目标位置的元素添加一个ref引用，然后通过程序调用该ref来执行滚动。

vue中锚点的三种方法

08-27

本文给大家带来了vue中锚点的三种方法，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧

Nuxt.js的路由跳转操作(页面跳转nuxt-link)

01-21

路由跳转代码如下： HOME page NEWS page PLAY page 注意说明： to 前面有冒号“ : ” to 后面跟的是路径比如“/page/index”(可以跟字符串或对象)同上↑ 补充知识：nuxt的 nuxt

vue跨页面跳转锚点

09-01

- *3* [VUE—跨页面锚点（nuxt同样适用）](https://blog.csdn.net/Poppy_LYT/article/details/119995904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

王佳斌

07-05

4621

vue2，nuxt2，锚点，锚点定位，跳转到指定位置，锚点定位跳转，添加锚点，根据文章浏览位置，目录高亮相应标题，锚点定位的目录，竖向滚动条效果并实现锚点定位跳转，滚动与导航联动，导航栏绑定内容锚点+滚动动画，vue锚点平滑滚动，如何设置描点跳转到对应页面，菜单绑定内容锚点滚动动画，锚点滚动过程怎么加入动画，过渡效果，anchor，导航锚点联动，滚动监听和点击平滑滚动跳转实例，页面内跳转锚点的使用，跨页面锚点跳转，锚点滚动，定位滚动，实现锚点定位以及平滑滚动到指定位置，动态锚点定位，页面滚动和点击菜单联动效

vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

08-28

在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...

vue中页面路由跳转，锚点定位问题记录

Fiona_lms的博客

09-02

746

最近不是特别忙，然后甲方让我们处理一下项目遗留下来的问题，就看到了一个路由跳转然后锚点定位问题，问题记录的是：【监控中心】从监控中心进入历史数据概率性出现不会定位到对应列表上我就在本地测试了一下，的确在火狐上是不行的，定位不准，但是我网上百度了一下，说方案是看可行的 const dom = this.$refs[`table_${status}_${sourceType}`][0]; if (dom && dom.$el) { this.$nextTic

get-anchor:通过href和可选查询获取锚点

05-24

得到锚通过href和可选获取锚点。安装 $ npm install get-anchor 用法 const getAnchor = require ( 'get-anchor' ) // create an anchor on the DOM const anchorEl = document . createElement ( 'a' ) anchorEl . setAttribute ( 'href' , '#oh-my-element' ) document . body . appendChild ( anchorEl ) getAnchor ( 'oh-my-element' ) // => <a></a> 原料药 getAnchor（href [，query]）通过href和可选获取锚点。返回第一个匹配项。也可以看看

js实现web端锚点定位

我的博客

03-02

447

一、代码实现 // domId为需要定位的元素id changeTab (domId) { // const id = decodeURIComponent(`#${domId}`) // const el = document.querySelector(id) const el = document.getElementById(domId) // 上面这种方法获取el也可以 const rect = el.getBoundingCl

uniapp - 全端兼容 “选项卡瞄点定位“ 功能，点击后滚动到锚点位置并且选项卡自动吸顶，当 “经过“ 锚点时自动定位选项卡（详细运行示例源码，超详细注释稳定可靠！）支持H5、App、小程序全平台

王佳斌

03-29

4860

uniapp瞄点选项卡，uniapp锚点，uniapp H5 微信小程序 APP平台锚点定位，uniapp锚点链接，uniapp实现商品详情锚点定位效果，uniapp项目如何实现锚点定位功能，uniapp 微信小程序 h5网页如何使用锚点定位效果，uniapp如何实现锚点跳转，使用uniapp如何实现锚点定位和滚动监听功能，uni-app H5 小程序中使用锚点定位，uni-app添加锚点和监听滚动切换tab，uniapp实现点击吸顶锚点定位，uniapp滚动吸顶+锚点+滚动自动tab切换，uniapp锚点

页面跳转和锚点跳转（跳转到页面的某一固定位置）

热门推荐

小彩虹的博客

01-13

1万+

今天分享一下，页面跳转和锚点跳转。页面跳转——也叫超链接跳转页面，从一个页面跳转到另外一个页面；锚点跳转——从一个页面跳转到当前页面的某一个位置，也可以跳转到其他页面的某一位置。页面跳转  ...

nuxt的 nuxt-link 有个坑

xuelang532777032的博客

11-01

1万+

如果你跟着nuxt的案例走，记住，所以目录比如 PAGES 目录你最好小写 pages 所有目录都小写因为当你敲下面哪行代码时 {{ post.title }}name其实指向的是路由，而路由死活区分大小写的注意 to后面区分大小写！！！所以如果你目录是大写的 PAGES 以上代码要写成 {{ post.title }}

nuxt.js 关于页面中css 提取到 link的方法

前端看世界

05-27

8093

nuxt.js 关于页面中css 提取到 link的方法说明：关于nuxt.js的资料并不是很多，有时候遇到个很简单的问题，百度或者谷歌都不是很容易找到。其实这个问题就很简单，但是也让我浪费了很多时间，所以在此共勉。正题：下面这张图片就是提取之后的样子，所有css 都放到了/nuxt/app.XXX.css中了。功能实现：只有一个步骤只有一个步骤只有一个...

NUXT.JS 路由内传参，多请求并发

DemonL的专栏

12-27

3456

两种传参方法 1.nuxt <nuxt-link :to="{path: item.link,query:{id:item.value}}">{{ item.text }}</nuxt-link> nuxt-link 细分两种 to name 或path 若目录为 name 时路径为 pages-product-a 中间为横杠 &lt...

nuxt和vue开发有什么区别,有必要使用nuxt框架吗

wenangou的博客

09-10

3483

单纯从技术角度分析，我大致做了如下知识点罗列，希望对大家的学习有帮助~PC端网站布局：HTML基础，CSS基础，CSS核心属性，CSS样式层叠，继承，盒模型，容器，溢出及元素类型，浏览器兼容与宽高自适度，定位，锚点与透明，图片整合，表格，CSS属性与滤镜等。原生JavaScript交互功能开发：基本语法，循环语句，函数与数组，String与Date，BOM与DOM，事件，拖拽效果，cookie存储，正则表达式，Ajax，面向对象基础，运动与游戏开发等。