VueRouter - scrollbehavior to hash

Question

I'm using vueRouter on the site, but I ran into a problem. If I want to click between hashes, scrollBehavior doesn't work for me.

if you click on the Bio page on "noubtest.com" and try to go to "services" only the url will change but you won't get to the correct section in the Bio.

https://noubtest.com/home -> https://noubtest.com/home#fifthPage

Navigation

 <router-link v-show="!mobile" class="link bio" :to="{ name: 'Home', hash: '#firstPage' }">Bio</router-link>
    <router-link v-show="!mobile" class="link link2" :to="{ name: 'Home', hash: '#fifthPage' }">Services</router-link>

Router - index.js

import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  
  {
    path: "/home",
    name: "Home",
    component: Home,
    meta: {
      title: "Bio",
      requiresAuth: false,
    },
  },

const router = new VueRouter({


mode: "history",
 
  routes,
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
});

I'm a newbie, could you please guide me on how to fix this? so that I can move between sections on one page using the menu?

I also use the fullpage.js module on the website (but it probably won't be a problem)

Give a try to that one: https://stackoverflow.com/a/74387266/8816585 — kissu, Dec 13 '22 at 21:12
I get an error for routes: [...].. probably not suitable for my version of vue-router — Václav Blaha, Dec 13 '22 at 21:17
Hard to help without the actual error + your version/config. — kissu, Dec 13 '22 at 21:30
Syntax Error: Unexpected token (197:14) 195 | }, 196 | // important part above > 197 | routes: [...], | ^ 198 | 199 | }); 200 | — Václav Blaha, Dec 13 '22 at 22:05
Consider using the [latest vue-fullPage.js version](https://github.com/alvarotrigo/vue-fullpage.js) instead. The one you are using is no longer maintained. — Alvaro, Dec 14 '22 at 17:06
if i update it stops working with my version of vue, but i assume it's not a problem through hash navigation — Václav Blaha, Dec 14 '22 at 21:18

VueRouter - scrollbehavior to hash

0 Answers0