Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

187
Views
Direct url with hash value does not work with vue-router

Navigating to url: site.com/#locallink 'redirects' to site.com, first time entered in the browser - in other words, does not jump to the anchor. If I simply re-type the url (site.com/#locallink) then it works as expected (jumps to anchor).

I have defined routes and router like so, and history mode as you can see.

 let router = new VueRouter({
        mode: 'history',
        scrollBehavior: function (to, from, savedPosition) {
            if (to.hash) {
                return { selector: to.hash }
            } else {
                return { x: 0, y: 0 }
            }
        },
        routes
    });

If I have a link on another page to the same anchor, then it works flawlessly. It's only when typed into the browser directly that it does not seem to work - the # part of it get's eaten.

The routes follow this pattern:

export const routes = [
     {
    path: '/',
    name: 'home',
    component: require('components/prelogin/landingpage.vue'),
    meta: {
        title: 'Some title',
        metaTags: [
            {
                name: 'title',
                content: '...'
            },
            {
                name: 'description',
                content: 'some description here...'
            }
        ]
    }
},
...

There are many entries so only showing first.

Any ideas? Thanks

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Hope it will help

scrollBehavior: function (to, from, savedPosition) {
    if (to.hash){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({
                        selector: to.hash,
                        behavior: 'smooth',
                    })
                }, 500)
            })
    } else {
            return { x: 0, y: 0 }
    }
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!