Vue.roteador js

Vue.O JS é uma estrutura JavaScript reativa, usada para criar UIS (interfaces de usuário) e spas (aplicativos de uma página única) e os desenvolvedores adoram codificar e sentir liberdade e conforto ao desenvolver aplicativos em Vue.JS. Para fins de roteamento, Vue.O JS não fornece o recurso de roteamento interno. Mas há uma biblioteca oficial de terceiros com o nome do roteador Vue para fornecer esse recurso. Ao usar esse recurso, podemos navegar entre as páginas da web, mas sem recarregar. Então, neste artigo, vamos ver como podemos instalar e usar o roteador Vue em Vue.JS.

Instalação

Podemos instalar o roteador Vue em um vue existente.Projeto JS executando o seguinte comando no terminal

NPM Instale Vue-Router

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.Use (roteador)

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

Mas se você estiver instalando Vue.JS usando Vue CLI. Você não precisará desta etapa de instalação extra. Você pode adicionar um plug-in Vue-Router durante a seleção de uma predefinição.

Uso

O uso do vue-router é muito simples e fácil de usar. Primeiro, no modelo ou html

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

No JavaScript, primeiro precisamos 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 importaremos no índice do roteador.arquivo js no diretório do roteador e define como uma rota.

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

importar comp de "… /visualizações /comp.vue ";

Depois de importar, temos que definir a rota agora e mapeá -la para o componente. Assim,

Rotas const = [

caminho: "/",
Nome: "Comp",
Componente: Comp

];

Também podemos dar várias rotas, separadas por uma vírgula. Assim,

Rotas const = [

caminho: "/",
Nome: "Comp",
Componente: Comp
,

Caminho: "/Comp2",
Nome: "Comp2",
Componente: Comp2

];

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

Const Router = Createrouter (
rotas // curta para 'rotas: rotas'
);

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

createApp (aplicativo)
.Use (roteador)
.montagem ("#app");

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

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

métodos:
clickfunc ()
esse.$ roteador.push ('/about')

Encerrando e resumo

Neste artigo, aprendemos a instalar o roteador Vue usando maneiras diferentes e aprendemos a usar o roteador Vue programaticamente em JavaScript e no Vue.Modelo de JS. Também aprendemos a configurar o roteador Vue em um projeto existente em um guia muito fácil e passo a passo. Se você quiser aprender mais sobre o roteador Vue, visite o roteador Vue: Docos oficiais.