Como lidar com o roteamento no Vue com o Vue Router

O Vue Router, o roteador oficial do Vue, possibilita a criação de aplicativos de página única (SPAs) no Vue. O Vue Router permite mapear os componentes do seu aplicativo da web para diferentes rotas de navegador, gerenciar a pilha de histórico do seu aplicativo e configurar opções avançadas de roteamento.

Começando com o Vue Router

Para começar com o Vue Router, execute o seguinte npm (Gerenciador de pacotes de nós) comando em seu diretório preferido para criar seu aplicativo Vue:

npm create vue 

Quando perguntado se deseja adicionar Vue Router para Aplicativo de página única desenvolvimento, selecione Sim.

Em seguida, abra seu projeto em seu editor de texto preferido. do seu aplicativo origem diretório deve incluir um roteador pasta.

O roteador pasta abriga um index.js arquivo contendo o código JavaScript para manipulação de rotas em seu aplicativo. O index.js arquivo importa duas funções do vue-router pacote: criarRouter e criarWebHistory.

O criarRouter A função cria uma nova configuração de rota a partir de um objeto. Este objeto contém o história e rotas chaves e seus valores. O rotas key é um array de objetos detalhando a configuração de cada rota, como visto na imagem acima.

Depois de configurar suas rotas, você precisa exportar este roteador instância e importar esta instância para o main.js arquivo:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Você importou o roteador função no main.js arquivo e, em seguida, fez seu aplicativo Vue usar esta função de roteador com o usar método.

Você pode aplicar suas rotas ao seu aplicativo Vue estruturando um bloco de código semelhante ao abaixo: