I have knowledge of Vue's scrollBehavior function, but I am struggling to integrate it with my existing code.
On my Index page, I have sections composed of imported Vue components like this:
<template>
<div class="Container">
<About />
<Services />
<Contact />
</div>
</template>
The Navbar on my site contains links to 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>
This information is sourced from the script in my App.vue file:
<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>
Currently, when I click on "About," it redirects me to a separate page for the "About" component. However, I want the page to scroll down to the About component embedded in my Index page upon clicking "About."
How can I achieve this? Do I need to make changes to the path?