5
respostas

Problema com o router-link

Professor, bom dia!

estou com o seguinte problema no router-link, criei o seguinte botão:

<router-link to="franqueado"><div class="bt">seja um franqueado</div></router-link>

Porém, da forma que está, ao acessar o link o site abre com o scroll lá no rodapé.

<a href="/franqueado"><div class="bt">seja um franqueado</div></a>

Ele abre normal (no topo da página). Porém quando subo para o servidor de hospedagem, dá page not found.

E esse mesmo link está configurado no menu e abre normalmente, no menu ele está de forma dinâmica

<li v-for="itens in menu" :key="itens.title">
    <router-link :to="itens.link">{{ itens.title }}</router-link>
</li>

O que é preciso fazer para que o router-link abra e carregue a página no topo?

5 respostas

Não sei se entendi bem sua dúvida, mas parece que de alguma maneira, seu link está ancorado.

Você tem seu código no github pra dar uma olhada?

Obrigado por responder Allan,

então, é como se o link estivesse ancorado mesmo, mas não está. Estou chamando o router-link normal, porém a página só abre levando para o rodapé, ao invés de abrir do topo.

Esse é o código da página, o botão que está dando problema é o "Seja um franqueado"

<template>
  <div class="container" name="franquias">
    <h3>Faça parte você também da <span>nossa rede de franquias</span></span></h3>
    <div class="row">
        <div v-for="franquia in franquias" :key="franquia.id_franquia" class="col-md-2">
            <router-link  :to="{ name: 'interna-franquia', params: { id: franquia.id_franquia }}">
            <div class="blocks"><img :src="franquia.imagem" alt=""></div>
            <h4>{{ franquia.titulo }}</h4>
            </router-link>
        </div>
    </div>
    <router-link to="franqueado"><div class="bt">seja um franqueado</div></router-link>
    <!--<a href="/franqueado"><div class="bt">seja um franqueado</div></a>-->
  </div>
</template>

<script>
export default {
    data() {
        return {
            franquias: []
        }
    },
    created() {
      this.$http.get('franquia_site')
          .then(res => res.json())
          .then(franquias => this.franquias = franquias, err => console.log(err));
    }
}
</script>

Nas rotas também está tudo normal

export const routes = [
  ...
    { path: '/franqueado', name:'franqueado', component: Franqueado, titulo: 'Franqueado' },
...

Eu não faço ideia do que pode ser nem do que eu preciso fazer.

Desde já agradeço seu apoio.

Tenta o seguinte:

  • Vai no configurador do seu router e coloca o mode: 'history' como exemplo abaixo:
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Se der certo, me avisa

Pior que já está assim

const router = new VueRouter({
    routes,
    linkActiveClass: 'active',
    mode: 'history'
});

Tem como me mandar seu projeto pra eu tentar testar aqui?