在Vue.js中，如何滚动到导入的组件? [英] In Vue.js, how do I scroll to an imported component?

问题描述

我知道Vue拥有的scrollBehavior函数，但是我不确定如何在我的代码中使用它.

I know about the scrollBehavior function that Vue has, but I am unsure of how to use it with my code.

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

I have an Index page, where sections are made of imported vue components. For example

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

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

My Navbar has links to all these components.

    <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脚本中获得的

which it gets from my App.vue script

    <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>

但是，如果我单击关于"，它将带我进入关于"组件的单独页面.当我单击关于"时，我希望页面向下滚动到嵌套在索引"页面上的导入的关于"组件.

but if I click on "About" it will just take me to a seperate page for the "About" component. When I click on "About" I want the page to scroll down to the imported About component that is nested on my Index page.

我该怎么做?我需要改变路径吗?

How can I accomplish this? Is it something I need to change in the path?

推荐答案

我发现此视频非常有用，我的目标是能够在同一页面的组件之间滚动.但我认为您仍然可以在任何地方申请

i found this video so useful, my goal was able to scroll between component at the same page. but still you can apply anywhere, i think

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

这篇关于在Vue.js中，如何滚动到导入的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！