在 Vue.js 中，如何滚动到导入的组件？

Posted 2023-02-23

【中文标题】在 Vue.js 中，如何滚动到导入的组件？

【英文标题】：In Vue.js, how do I scroll to an imported component?

【发布时间】：2020-09-04 21:38:34

【问题描述】：

我知道 Vue 的 scrollBehavior 功能，但我不确定如何在我的代码中使用它。

我有一个索引页面，其中部分由导入的 vue 组件组成。 例如

<template>
  <div class="Container">
   <About />
   <Services />
   <Contact />
  </div>
</template>

我的导航栏包含所有这些组件的链接。

    <template>
    <nav>
    <img class="nav__logo" :src="navLogo"  >
        <ul class="nav__row" ref="nav">
            <div class="nav__row__dropdown-toggle-btn" @click="toggleNav">
                <img :src="navMenuIcon"  >
            </div>
            <li class="nav__list-item" v-for="(link, index) in navLinks" :key="index"
                @mouseover="hover = true"
                @mouseleave="hover = false"
                :class="  active: hover  ">
                <router-link :to="link.path">
                     link.text 
                </router-link>
            </li>
        </ul>
    </nav>
</template>

它来自我的 App.vue 脚本

    <script>
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
export default 
  components: 
    Navbar,
    Footer
  ,
  data: () => (
    navLinks: [
      
        text: 'Home',
        path: '/'
      ,
      
        text: 'About',
        path: '/about'
      ,
      
        text: 'Contact',
        path: '/contact'
      ,
      
        text: 'Services',
        path: '/services'
      
    ]
  )

</script>

但如果我点击“关于”，它只会将我带到“关于”组件的单独页面。 当我点击“关于”时，我希望页面向下滚动到嵌套在我的索引页面上的导入的关于组件。

我怎样才能做到这一点？我需要在路径中更改什么吗？

【问题讨论】：

路由器不是这样工作的。通常，在 App.vue 模板的某处有一个 <router-view /> 标签。在导航到不同的路线时，该标签将被路线指向的组件替换。您似乎想要的是一个应用程序，其中所有组件都存在于同一页面中，以及一个 scrollspy 函数，它根据滚动位置动态更改路由（而不更改页面内容）。实现它的最简单方法可能是使用已经存在的 scrollspy 导航演示并将其部分替换为您的“页面”。

【参考方案1】：

您尝试实现的路由器的想法实际上是将关于组件视为一个页面，当点击它时，它将转到该页面（并更改 URL）

所以，为了实现你想要的，我其实建议使用纯javascript

首先，给出 About 组件和 id（如果您更喜欢 Vue ref，则为 ref）

 <template>
      <div class="Container">
       <About id="about"/>
       <Services />
       <Contact />
      </div>
    </template>

然后给nav的click事件绑定一个方法

 <li class="nav__list-item" v-for="(link, index) in navLinks" :key="index"
                @mouseover="hover = true"
                @mouseleave="hover = false"
                :class="  active: hover  ">
                @click=nav(link)
            </li>


data: () => (
    navLinks: [
      
        text: 'About',
        id: 'about'
      
    ]
  ),

methods:
  nav(link) 
          const position = document.getElementById(link.id).offsetTop;
          // smooth scroll
          window.scrollTo( top: position, behavior: "smooth" );  
   

如果您更喜欢 Vue ref，可以将所有 id 更改为 ref。并改用this.$refs[link.id].$el.offsetTop；

【参考方案2】：

我发现这个视频很有用， 我的目标是能够在同一页面的组件之间滚动。 但我认为你仍然可以在任何地方申请

https://laracasts.com/series/practical-vue-components/episodes/1