vue路由跳转页面后滚动到指定位置

Mitin_

已于 2023-10-13 12:30:30 修改

阅读量1k

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-05-10 16:49:33 首次发布

本文链接：https://blog.youkuaiyun.com/Mitin_/article/details/130604554

版权

文章介绍了两种方法在Vue中实现从首页评论跳转到商品详情页，并自动滚动到对应商品评论处。一种是使用$refs结合$nextTick进行定位，另一种是利用路由的scrollBehavior功能。要注意ref不应放在display:none的元素上，以及正确配置scrollBehavior。

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

需求：首页有一个评论内容对应着某个商品，点击该评论跳转到商品详情页，并且跳转到商品详情的评论处

一、使用ref结合this.$nextTick

具体代码如下：

async mounted() {
    let preView = this.$route.params.preView;
    if (preView === 1) {
      this.$nextTick(() => {
        this.$refs.previewArea.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      });
    }
 },

不要忘记在对应的元素上加上ref属性哦

<div ref="previewArea">
评论...
</div>

注意：我在使用的时候，把ref放在了一个带有display：none的元素上，导致路由跳转后并没有跳转到我指定的位置，找了好一会发现ref写错了位置，注意不要写到带有display：none的元素上！

二、使用路由自带的scrollBehavior

参考连接：

滚动行为【路由跳转时，页面滚动到指定位置】_vue跳转新路由滚动到固定位置_白小水i的博客-优快云博客

Vue中如何使用路由实现页面滚动控制和定位？-Vue.js-PHP中文网