How to use anchor in vuejs/Vue-Loader?

Question

I’m creating a project with vuejs webpack (Vue-Loader) and recently I came across a problem, I can’t anchor any tag, because Vue understands that when using the hash #, you want to direct to a route... Someone knows how to fix this ?

I want when there is a click on the tag <a>, the page is 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>

On the href of the tag <a> I’ve tried to put the following ways: #ancora, /endereço-url#ancora , /endereço-url/#ancora , /#ancora.
But all without success

Answer 1

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

In case 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 very much for your help

Answer 2

I believe you are using vueRouter, if yes, 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 "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 in the link: http://router.vuejs.org/en/advanced/scroll-behavior.html

The example was taken from the following link: https://stackoverflow.com/questions/40341939/how-to-create-anchor-tags-with-vue-router

Answer 3

Hello

See another solution, maybe it’s simpler.

    <a v-bind:href="ancoraTeste" @click="showAlert">{{textLink}} </a>

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

   <script>
       new Vue({
         el:'#app',
         data:{
            textLink:'Link com Ancora',
            ancoraTeste: '#ancora'
         },
         methods:{

             showAlert: function(event){
                alert('show')
             }

         }
       });
    </script>