# Roteamento

# Roteador oficial

Para a maioria das aplicações de página única (Single Page Application), é recomendado utilizar a biblioteca vue-router (opens new window) oficial. Para mais detalhes, veja a documentação (opens new window) do vue-router.

# Roteamento básico do zero

Se você só precisa de um roteamento simples e não tem interesse em utilizar uma biblioteca robusta de roteamento, você pode o fazer dinamicamente, renderizando um componente no nível da página (page-level component), desse jeito:

const { createApp, h } = Vue

const NotFoundComponent = { template: '<p>Page not found</p>' }
const HomeComponent = { template: '<p>Home page</p>' }
const AboutComponent = { template: '<p>About page</p>' }

const routes = {
  '/': HomeComponent,
  '/about': AboutComponent
}

const SimpleRouter = {
  data: () => ({
    currentRoute: window.location.pathname
  }),

  computed: {
    CurrentComponent() {
      return routes[this.currentRoute] || NotFoundComponent
    }
  },

  render() {
    return h(this.CurrentComponent)
  }
}

createApp(SimpleRouter).mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Combinado com a History API (opens new window), você poderá construir um roteador básico (porém poderoso) no lado do cliente (client-side router). Para ver isso na prática, acesse esse app de exemplo (opens new window).

# Integrando com roteadores externos

Se você preferir utilizar um roteador de terceiros (3rd-party router), como por exemplo Page.js (opens new window) ou Director (opens new window), a integração é igualmente simples (opens new window). Segue aqui um exemplo completo (opens new window) utilizando Page.js.

← Deploy em Produção Gerenciamento de Estado →