Vue.roteador js

Vue.js é uma estrutura javascript reativa, que é usada para construir UIs (interfaces de usuário) e SPAs (aplicativos de página única) e os desenvolvedores adoram codificar e sentem liberdade e conforto ao desenvolver aplicativos no Vue.js. Para fins de roteamento, Vue.js não fornece o recurso de roteamento embutido. Mas existe uma biblioteca oficial de terceiros com o nome de Vue Router para fornecer este recurso. Usando este recurso, podemos navegar entre as páginas da web, mas sem recarregar. Portanto, neste artigo, veremos como podemos instalar e usar o Vue Router no Vue.js.

Instalação

Podemos instalar o roteador Vue em um Vue existente.projeto js executando o seguinte comando no terminal

npm instalar vue-roteador

Após uma instalação bem-sucedida, precisamos importar VueRouter no principal.arquivo js no diretório src também usando a seguinte sintaxe

importar Vue de 'vue'
importar roteador de './roteador'
Vue.usar (roteador)

Depois de importar o roteador, você está pronto para usar o vue-router em seu projeto.

Mas se você estiver instalando o Vue.js usando Vue CLI. Você não precisará desta etapa extra de instalação. Você pode adicionar um plugin vue-roteador durante a seleção de uma predefinição.

Uso

O uso do roteador vue é muito simples e fácil de usar. Primeiro, no modelo ou HTML

Neste exemplo bastante simples e claro de vue-router. Criamos uma navegação simples usando componentes de link de roteador e fornecemos o link usando o prop chamado 'para'. O link do roteador funciona da mesma forma que uma tag âncora 'a'. Na verdade, é renderizado como uma tag 'a' por padrão. Na visão do roteador, teremos o componente relativo que corresponde à rota.

No javascript, primeiro temos que registrar e importar os componentes para definir suas rotas. Supomos que temos um componente chamado Comp.vue no diretório de visualizações para o qual iremos importar no índice do roteador.arquivo js no diretório do roteador e defini-lo como uma rota.

Para importar um componente, usamos a seguinte instrução

import Comp from "… / views / Comp.vue ";

Após a importação, temos que definir a rota agora e mapeá-la para o componente. Como isso,

rotas const = [

caminho: "/",
nome: "Comp",
componente: Comp

];

Podemos fornecer várias rotas também, separadas por uma vírgula. Como isso,

rotas const = [

caminho: "/",
nome: "Comp",
componente: Comp
,

caminho: "/ comp2",
nome: "Comp2",
componente: Comp2

];

Depois de definir as rotas. Passe a matriz de rotas para as instâncias do roteador. Então, vamos criar a instância do roteador também

const router = createRouter (
rotas // abreviação de 'rotas: rotas'
);

No final, no principal.arquivo js. Temos que criar a instância raiz e montá-la também e injetar as rotas nela para que todo o aplicativo fique ciente das rotas.

createApp (App)
.usar (roteador)
.montagem ("# app");

Usando esta técnica de injeção. Podemos acessar o roteador em qualquer componente, usando esta.$ roteador.

Agora podemos enviar rotas programaticamente com o clique de um botão ou qualquer coisa que você quiser, em vez de usar o componente de link do roteador. Por exemplo,

métodos:
clickFunc ()
esta.$ roteador.push ('/ sobre')

Conclusão e resumo

Neste artigo, aprendemos a instalar o Vue Router usando diferentes maneiras e aprendemos a usar o Vue Router de forma programática em javascript e no Vue.template de js. Também aprendemos a configurar o Vue Router em um projeto existente em um guia muito fácil e detalhado passo a passo. Se você quiser saber mais sobre o Vue Router, visite Vue Router: Official Docs.