Estive utilizando o modo history na configuração do vue-router mas não tive sucesso, pois quando acesso a rota de cadastro o meu navegador está sendo recarregado. Só após o load, minha view é renderizada. Como fazer para resolver este problema?
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
Fala aí André, tudo bem? Como estão suas rotas nos componentes? Poderia postar um exemplo do HTML?
Fico no aguardo
Beleza Matheus, vou postar aqui para você.
Este é o componente do menu.
<template>
<nav>
<ul>
<li v-for="rota in rotas">
<router-link :to="rota.path ? rota.path : '/'">{{ rota.titulo }}</router-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: {
rotas: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
</style>Este é meu App.vue, onde uso o menu
<template>
<div class="corpo">
<meu-menu :rotas="routes"/>
<transition name="pagina">
<router-view></router-view>
</transition>
</div>
</template>
<script>
import { routes } from "./routes";
import Menu from './components/shared/menu/Menu.vue';
export default {
components: {
'meu-menu': Menu
},
data() {
return {
routes
};
}
};
</script>
<style>
//estilo oculto
</style>Por último, meu arquivo de rotas.
import Home from './components/home/Home.vue';
import Cadastro from './components/cadastro/Cadastro.vue';
export const routes = [
{ path: '', component: Home, titulo: 'Home' },
{ path: '/cadastro', component: Cadastro, titulo: 'Cadastro' }
];