Começar

A criação de uma Aplicação de Página Única com a Vue + Vue Router acontece de maneira natural: com a Vue.js, já estamos a compor a nossa aplicação com componentes. Quando adicionamos a Vue Router para a mistura, todo o que precisamos fazer é mapear os nossos componentes para rotas e deixar a Vue Router saber onde apresentá-las. Aqui está um exemplo básico:

HTML

router-link

Nota como que ao invés de usar os marcadores a normais, usamos um componente personalizado router-link para criar ligações. Isto permite que a Vue Router para mudar a URL sem recarregar a página, manipular a geração de URL bem como a sua codificação. Nós veremos depois como tiver proveito destas funcionalidades.

router-view

O router-view exibirá o componente que corresponde a URL. Tu podes colocá-lo em qualquer lugar para adaptá-lo para o teu esquema.

Receba a Vue Router Cheat Sheet da Vue Mastery

JavaScript

Ao chamar app.use(router), recebemos acesso para ele como this.$router bem como a rota atual como this.$route dento de qualquer componente:

Para acessar o roteador ou a rota dentro da função setup, chame as funções useRouter ou useRoute. Nós aprenderemos mais a respeito disto na API de Composição

Em toda documentação, usaremos com frequência a instância router. Lembra-te de que usar this.$router é exatamente o mesmo que usar diretamente a instância router criado através da função createRouter. O motivo de usarmos this.$router é o de não querermos importar o roteador em todo componente individual que precisa manipular o roteamento.