How to use ancora in vuejs / vue-loader?

Question

How to use ancora in vuejs / vue-loader?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm creating a project with vuejs webpack (vue-loader) and recently I came across a problem, I can not anchor any tags, because vue understands that when using hash #, you are wanting to direct to a route ... Anyone know how to solve this?

I want the page to be anchored to the bottom div:

<a href="#ancora"> Teste </a>

<div id="ancora" style="margin-top: 1000px">
   <h1> Oi, eu sou uma div </h1>
</div>

In the href of tag <a> already tried to put in the following ways: <a> , #ancora , /endereço-url#ancora , /endereço-url/#ancora . But all to no avail

vue.js webpack

asked by anonymous 07.05.2017 / 07:11

2 answers

how to install imagemagick on macintosh (Xampp) NIM Game - PYTHON

score 0 · Answer 1

I believe you are using vueRouter, if so, you need to change the way the scrollBehavior function behaves. The example below demonstrates how to navigate to the element on the page instead of changing the page.

new VueRouter({
    mode: 'history',
    scrollBehavior: function(to, from, savedPosition) {
        if (to.hash) {
            return {selector: to.hash}
        } else {
            return { x: 0, y: 0 }
        }
    },
    routes: [
        {path: '/', component: abcView},
        // your routes
    ]
});

The documentation can be found at the link: link

The example was taken from the following link: link

score 0 · Answer 2

I found that using the <router-link> tag instead of the <a> tag, it is possible to solve this problem, as well as solve other problems such as active links.

It would look like this:

<router-link to="#ancora"> Teste </router-link>

<div id="ancora" style="margin-top: 1000px">
   <h1> Oi, eu sou uma div </h1>
</div>

Thank you all for the help