Routes
Vamos entender como é feita a composição de rotas para o VueRouter no Skeleton, já que a mesma é feita de forma diferente do padrão que se costuma ver em projetos Quasar ou Vue
Last updated
Was this helpful?
Vamos entender como é feita a composição de rotas para o VueRouter no Skeleton, já que a mesma é feita de forma diferente do padrão que se costuma ver em projetos Quasar ou Vue
Last updated
Was this helpful?
Em src/router/index.js fica a criação do roteador da aplicação. Há alguns detalhes um pouco diferentes do padrão que o template do Quasar entrega. Vamos ver um sobre essas diferenças à seguir.
Logo do começo do index.js será possível ver que há um import para um arquivo chamado AppRouter. Isto será visto em um trecho parecido com o trecho abaixo.
Este arquivo é uma classe que estende o VueRouter permitindo modificar, aprimorar e adicionar comportamentos ao roteador.
RouterAlém de configurar dois middleware base também há a configuração das rotas. Esta configuração é feita de uma forma diferente, ao invés de "puxar" as rotas e adicioná-las como argumento na construção do router são importadas funções (também chamadas de RouteFile) que recebem o $router como argumento para que cada módulo seja responsável por adicionar suas rotas.
Esta mudança permite que os módulos tenham mais independência sobre as configurações que podem fazer no projeto. Logo, ao invés de ter apenas um beforeEach, por exemplo, teremos vários middleware deste tipo distribuídos pelo projeto.
RouteFileO RouteFile do module Auth fica em src/modules/Auth/router/routeFile.js e é bem simples, tendo apenas uma rota. Como falado à pouco ele recebe o router como parâmetro e utiliza o método addRoutes para adicionar as rotas. No caso estão sendo usados helpers route e group para criar as rotas. Estas funções constroem objetos compatíveis com a RouteConfig que são as estruturas tradicionais de rotas.
RouteFileAlocado em src/modules/Dashboard/router/routeFile.js a composição de rotas do Dashboard será bem mais extensa que a do Auth. Este module irá abrigar todo "painel de controle", por isso ao invés de definir todas as rotas nele mesmo são feitos imports de outros arquivos de rota. As demais rotas ficam junto do domínio do Schema e devem exportar sempre arrays. Para poder acessar os recursos que serão criados será preciso registar as rotas que criarmos nesse arquivo, por isso ele será lembrado mais pra frente.
Um arquivo de rotas precisa simplesmente exportar uma função que retorne um array de rotas como a imagem abaixo.
Quando se está criando uma quantidade grande de telas é comum repetir diversas vezes vários trechos e configurações. Para acelerar a criação é possível usar alguns helpers para a criação de rotas para CRUD, como pode ser visto no exemplo abaixo.
Este trecho acima cria um conjunto de 5 rotas devidamente configuradas. Para utilizar alguns recursos que estão pré-configurados no projeto é preciso configurar alguns detalhes no meta das rotas. A função crud já resolve isso e introduz o scope e o namespace no meta das rotas, permitindo que sejam passadas configurações adicionais. O exemplo a seguir é um trecho do arquivo src/app/Util/routing.js.
