Guia para o roteador Vue

Introdução

Ao desenvolver aplicativos da Web com Vue.js, a menos que você esteja criando um Aplicativo de página única (SPA), convém conectar várias páginas a uma página de destino para permitir que os usuários naveguem por elas. Isso é conhecido como roteamento.

Roteamento é o processo pelo qual um usuário é navegado para diferentes páginas em um site. Vue.js é uma estrutura JavaScript usada para criar aplicativos de página única, o que significa que esse aplicativo é carregado apenas uma vez do servidor para o navegador, e o navegador não precisa recarregar durante o roteamento; em vez disso, ele simplesmente solicita essas páginas e elas são carregadas.

Neste guia, aprenderemos como fazer roteamento com Vue.js e nos aprofundaremos nos vários tipos de roteamento que podem ser feitos e como eles podem ser feitos.

Iniciando

O roteamento no Vue.js é feito com Roteador Vue, que funciona em conjunto com a biblioteca principal do Vue para nos permitir configurar um sistema de roteamento. Nós gostaríamos de usar vue-router em dois cenários em nosso projeto. Queremos usar o roteador em um projeto existente ou adicioná-lo ao criar um novo projeto.

Configurar roteador Vue em projeto existente

Integração vue-router em um projeto existente pode ser técnico, e vamos analisar esses detalhes agora. O primeiro passo seria instalar o pacote do roteador vue usando o seguinte comando:

! npm install vue-router@4

Uma vez instalado, navegue até o src pasta e crie uma pasta chamada router, seguido por um arquivo chamado index.js no router pasta, que servirá como nosso arquivo de configuração do roteador. Nosso src agora o diretório ficará assim:

No index.js vamos garantir que colamos o código abaixo, que é o código de configuração do roteador:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

Nós temos uma routes array que contém um único objeto, que pode ser vários objetos em que cada objeto representa uma única rota. Por enquanto, criamos apenas aquele que redirecionaria para o componente da página inicial.

Cada um desses routes objetos são normalmente compostos por path, que é o caminho do URL relativo à raiz do site, o name, que serve como identificador, e o component, que importamos na parte superior da página.

Além da matriz de rotas, configuramos a instância do roteador na parte inferior criando um createRouter() função e passando no history valores-chave e routes array e, em seguida, exportamos o router instância para uso em nosso aplicativo.

Para usar esta configuração de roteador em nosso aplicativo, abra o main.js arquivo no src pasta, import router from "./router"e depois adicione .use(router) entre createApp(App) e .mount('#app') assim como está abaixo:

import router from './router' createApp(App).use(router).mount('#app')

Esta vue-router foi configurado globalmente em nosso aplicativo, e a próxima etapa é usá-lo em nosso aplicativo. Isso é facilmente realizado incluindo <router-view /> dentro do App.js tag de modelo, que renderiza apenas a rota correspondente:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Configurando Rotas no Vue.js

As rotas são geralmente criadas no router/index.js a matriz de rotas do arquivo e essas rotas se conectam aos componentes. É uma boa prática criar uma pasta de visualizações onde todas as visualizações de página serão armazenadas. Por exemplo:

Neste ponto, agora sabemos como configurar rotas manualmente.

Instale o roteador Vue com Vue CLI

Se estamos prestes a criar um novo projeto e acreditamos que vamos fazer uso de vue-router, é mais fácil fazer isso durante a criação do projeto.

Tudo o que precisamos fazer é usar o Vue CLI para instalar a versão mais recente do vue-router enquanto seleciona manualmente os recursos no processo de criação do nosso projeto:

Leia e saiba mais sobre como criar o projeto Vue.js através do nosso Guia para o Vue CLI!

Rotas de carregamento lento com roteador Vue

À medida que nosso aplicativo cresce em tamanho, o tamanho do pacote aumenta, fazendo com que nosso site demore mais para carregar. Podemos usar vue-router para implementar o carregamento lento para evitar o carregamento de algumas rotas específicas até que o usuário as solicite especificamente.

Isso normalmente é feito no arquivo de configuração do roteador removendo o import declaração no topo e substituindo-a por uma declaração de importação dinâmica na opção de componente de nossa rota:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Navegando entre rotas com

Até agora, conseguimos criar rotas, mas como navegamos dentro do nosso aplicativo? Nós usamos o <router-link> tag em vez do <a> elemento em HTML para lidar com roteamento.

Por exemplo, se quisermos criar uma barra de navegação na parte superior do nosso aplicativo, poderíamos fazer isso no App.js arquivo acima do <router-view/> tag para que apareça em todas as rotas:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

O roteador-link aceita o to='path' atributo que leva o usuário ao caminho do componente conforme definido ao configurar a rota. Isso funciona como o href='path``' atributo em HTML.

Como usar rotas nomeadas

O uso de rotas nomeadas nos permite passar no name chave que tem acesso ao name propriedade que definimos ao configurar as rotas em vez de usar o caminho vinculando os dados desta maneira:

<router-link :to="{ name: 'About' }">About</router-link>

Uma vantagem de usar esse método é que, caso decidamos alterar o caminho da rota para nossas aplicações grandes, não precisaremos começar a alterar o caminho de todos os links, o que pode ser complicado.

Roteamento Dinâmico

Podem surgir situações que exijam o uso de roteamento dinâmico para evitar repetições desnecessárias de páginas. Por exemplo, suponha que temos uma lista de frutas e queremos que um usuário possa clicar em uma fruta específica e apenas os detalhes sobre essa fruta são exibidos em uma página de detalhes da fruta. Nesse caso, usamos roteamento dinâmico.

Teríamos duas páginas – uma para mostrar as frutas em uma lista e outra para mostrar os detalhes de cada fruta, que é uma página de “planta” a ser preenchida com os detalhes da fruta. Criaremos as páginas na pasta Vue e adicionaremos as rotas ao routes matriz:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Notaremos que para o FruitDetails página, adicionamos uma dinâmica id propriedade para que obtenha o id parâmetro e o usa para consultar os dados específicos exibidos nessa página usando $route.params em nosso template, tornando a rota dinâmica.

No FruitsPage, suponha que temos uma matriz de frutas que fazemos um loop em nosso aplicativo, podemos envolver cada fruta com um link ao lado de parâmetros desta maneira:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

Neste ponto, quando um usuário clicar em cada fruta, ele o levará para o FruitDetails página onde podemos acessar id parâmetro e use-o para identificar quais detalhes da fruta devem ser mostrados no FruitDetails Disputas de Comerciais.

Acesse os Parâmetros de Rota

Até agora vimos como passar parâmetros para uma página específica dinamicamente, vamos agora ver como podemos acessar esse parâmetro em nosso FruitDetails página. Existem duas maneiras de acessar parâmetros no Vue – via $route.params ou fazendo uso de adereços:

utilização $ rota.params

Os parâmetros podem ser acessados ​​diretamente via $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Ou podemos acessá-lo dentro do nosso data() método usando this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Usando Vue Props

Outro método fácil de acessar dados dinamicamente por meio de rotas é usar props. Primeiro temos que definir props para true no objeto de configuração de rotas:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Desta forma, tudo o que temos a fazer é adicionar props opção para script tag e, em seguida, faça uso dos adereços dentro do nosso template etiqueta, rótulo, palavra-chave:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

Erros 404 - Nenhuma rota encontrada

Caso um usuário navegue para uma rota inexistente, o Vue irá carregar a página mas sem nenhum componente, produzindo uma página vazia. Nesse caso, a melhor coisa a fazer é exibir uma página 404 com talvez um botão que os leve à página inicial ou onde acreditamos que eles gostariam de ir.

Isso é facilmente tratado criando um componente para nossa página 404 e, em seguida, adicionando uma rota 404 à matriz de rotas do nosso arquivo de configuração do roteador, mas desta vez usaremos uma expressão regular para capturar todas as rotas que não foram declaradas anteriormente:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

A :catchAll é o segmento dinâmico que recebe uma expressão regular de (.*) em que o Vue Router usa para verificar se a rota para a qual o usuário navega está definida no arquivo de configuração do nosso roteador. Caso tais rotas não existam, o usuário é direcionado ao componente, que no nosso caso é o ErrorPage componente:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Redirecionamentos

Em uma situação em que queremos que os usuários sejam redirecionados quando visitam uma rota específica, por exemplo, se tivéssemos uma rota anterior que não usamos mais, queremos que os usuários sejam redirecionados para a nova quando visitarem essa rota. Isso é feito facilmente adicionando um novo objeto ao nosso array de configuração de rotas, com um redirect campo:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Tudo o que o código acima faz é que, se um usuário visitar, o caminho /all-fruits, ele os redirecionaria para o /fruits rota.

Navegação programática

Até agora, aprendemos muito sobre roteamento, mas há mais uma coisa que você deseja saber: como executar a navegação programática. Definimos navegação programática como uma situação em que um usuário é redirecionado/direcionado com base em uma ação específica que ocorre em uma rota, como uma ação de login ou inscrição, ou clicando em um botão específico, como um botão “voltar”.

Histórico do roteador

Podemos usar o histórico do navegador para navegar facilmente para trás ou para frente, dependendo de nossas preferências. Se você se lembra, temos um createRouter() função no arquivo de configuração do roteador onde definimos um history valor, permitindo que o roteador Vue acompanhe nosso histórico de roteador enquanto roteamos através do aplicativo da web.

Isso nos permite percorrer o histórico do navegador, com base em uma condicional como um clique de botão:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Também podemos decidir avançar usando o 1 em vez de -1 e suponha que queremos avançar 2 etapas, podemos usar 2 or -2.

Empurrar

push() é normalmente usado após a ocorrência de uma ação e adiciona uma nova entrada à pilha de histórico. Por exemplo, se um usuário fizer login com sucesso, gostaríamos de ser direcionados para a página do painel de forma programática. Isso é feito incluindo o método push ao lado do nome da rota:

this.$router.push({ name: 'Dashboard' });

Conclusão

O roteamento é uma das principais funcionalidades do Vue. A menos que você esteja construindo um Aplicativo de página única (SPA), convém conectar várias páginas a uma página de destino para permitir que os usuários naveguem por elas.

Neste guia, vimos o que é roteamento, como você pode instalar o vue-router em projetos novos e existentes, como executar carregamento lento, navegar entre rotas, executar roteamento dinâmico, acessar parâmetros de rota e executar navegação programática.

• Coinsmart. A melhor troca de Bitcoin e criptografia da Europa.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. ACESSO LIVRE.
• CryptoHawk. Radar Altcoin. Teste grátis.
• Fonte: https://stackabuse.com/guide-to-vue-router/