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

Question

我知道Vue的scrollBehavior函数，但我不知道如何在我的代码中使用它。

我有一个Index页面，其中的部分是由导入的Vue组件组成的，例如

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

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

    <template>
    <nav>
    <img class="nav__logo" :src="navLogo" height="40px" width="auto">
        <ul class="nav__row" ref="nav">
            <div class="nav__row__dropdown-toggle-btn" @click="toggleNav">
                <img :src="navMenuIcon" height="40px" width="auto">
            </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>

但如果我点击 "关于"，它就会把我带到一个单独的 "关于 "组件的页面，当我点击 "关于 "时，我想让页面向下滚动到导入的 "关于 "组件，该组件嵌套在我的索引页面上。

我怎样才能做到这一点？是不是需要我在路径上做一些改变？

Answer 1

你想实现的路由器的想法，其实是把About组件当作一个页面，当点击它时，它会进入该页面（并改变URL）。

所以，为了实现你想要的东西，其实我建议用纯javascript的方式来实现

首先，给 About 组件和id（或ref，如果你喜欢Vue ref）。

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

然后将方法绑定到导航的点击事件上

 <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 而不是。