Passando Propriedades para os Componentes de Rota

Usar $route no teu componente cria um acoplamento apertado com a rota o que limita a flexibilidade do componente já que ele apenas pode ser usado sobre certas URLs. Enquanto que isto não é necessariamente uma coisa má, podemos desfazer o acoplamento deste comportamento com uma opção props:

Nós podemos substituir

por

Isto permite-te usar o componente em qualquer lugar, o que torna o componente mais fácil de reutilizar e testar.

Modo Booleano

Quando o props for definido para true, a route.params serão definidas como propriedades do componente.

Visões Nomeadas

Para rotas com visões nomeadas, tens que definir a opção props para cada visão nomeada:

Modo de Objeto

Quando props for um objeto, este será definido como propriedades de componente como está. Útil para quando as propriedades forem estáticas.

Mode de Função

Tu podes criar uma função que retorna propriedades. Isto permite-te moldar parâmetros com outros tipos, combinar valores estáticos com valores baseados em rota etc.

A URL /search?q=vue passaria { query: 'vue' } como propriedades para o componente SearchUser.

Tente manter a função props sem estado (stateless, em Inglês), já que é apenas avaliada sobre as mudanças da rota. Use um componente invólucro (wrapper, em Inglês) se precisares de estado para definir as propriedades, desta maneira a Vue pode reagir às mudanças do estado.