Clique aqui para a documentação da v3.x.

Guia

Você está navegando a documentação da v2.x e anterior. Para a v3.x, clique aqui.

Roteamento

Roteador Oficial

Para a maioria das Single Page Applications, é recomendado usar a biblioteca oficialmente suportada vue-router. Para mais detalhes, veja a documentação do vue-router.

Roteamento Simples do Zero

Se você precisar apenas de rotas muito simples e não deseja adicionar uma biblioteca completa de rotas, você pode renderizar dinamicamente componentes a nível de páginas, deste modo:

const NotFound = { template: '<p>Página não encontrada</p>' }
const Home = { template: '<p>Página Inicial</p>' }
const About = { template: '<p>Sobre</p>' }

const routes = {
  '/': Home,
  '/sobre': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

Combinado com a API de histórico do HTML5, você pode criar um roteador do lado do cliente muito básico, porém totalmente funcional. Para ver isso na prática, confira este exemplo.

Integração com Roteadores de Terceiros

Se há uma biblioteca de terceiros para rotas que você prefira usar, como Page.js ou Director, a integração é igualmente fácil. Aqui está um exemplo completo usando Page.js.

← Publicando em Produção Gerenciamento de Estado →
Encontrou um erro ou quer contribuir com a documentação? Edite isto no Github! Deploy feito via Netlify .