1

Estou criando um projeto com vuejs webpack (vue-loader) e recentemente me deparei com um problema, não consigo ancorar nenhuma tag, pois o vue entende que ao usar o hash #, vc esta querendo direcionar para uma rota... Alguem sabe como resolver isso ?

Quero que quando houver um click na tag <a>, a pagina seja ancorada para a div de baixo:

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

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

No href da tag <a> ja tentei colocar das seguintes formas: #ancora, /endereço-url#ancora , /endereço-url/#ancora , /#ancora.
Mas tudo sem sucesso

1

3 Respostas 3

2

Descobri que ao usar a tag <router-link> ao invés da tag <a>, é possível resolver este problema, alem de também resolver outros problemas como o de links-ativos por exemplo.

No caso ficaria assim:

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

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

Muito obrigado a todos pela ajuda

1

Acredito que esteja utilizando o vueRouter, caso sim, é preciso alterar a forma como a função scrollBehavior se comporta. O exemplo abaixo demonstra como navegar até o elemento na página em vez de mudar de "página".

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
    ]
});

A documentação pode ser encontrada no link: http://router.vuejs.org/en/advanced/scroll-behavior.html

O exemplo foi retirado do seguinte link: https://stackoverflow.com/questions/40341939/how-to-create-anchor-tags-with-vue-router

1

Olá

Veja uma outra solução, talvez seja mais simples.

    <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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .