Roteamento

Roteamento é o processo de associar URLs a conteúdo específico em um aplicativo web. Em outras palavras, o roteamento permite que um usuário navegue pelas diferentes partes de um aplicativo da web usando URLs amigáveis e significativos.

Em Vue, o roteamento é gerenciado por meio do Vue Router, que é uma biblioteca separada que pode ser facilmente integrada a um aplicativo Vue existente. O Vue Router permite que os desenvolvedores definam rotas e seus respectivos componentes, além de lidar com a navegação entre as rotas.

Para usar o Vue Router, é necessário primeiro instalar a biblioteca usando o gerenciador de pacotes npm.

    
        npm install vue-router
        

Em seguida, é necessário configurar as rotas do aplicativo no arquivo router.js ou em um arquivo separado. Por exemplo, para definir uma rota para a página inicial e uma rota para a página de contato, podemos fazer o seguinte.

    
        import Vue from 'vue';
        import VueRouter from 'vue-router';
        
        Vue.use(VueRouter);
        
        const routes = [
          { path: '/', component: Home },
          { path: '/contact', component: Contact },
        ];
        
        const router = new VueRouter({
          routes,
        });
        
        export default router;
       

Aqui, estamos importando o Vue Router e definindo duas rotas: uma rota para a página inicial com o componente "Home" e outra rota para a página de contato com o componente "Contact". Em seguida, estamos criando uma instância do Vue Router e exportando-a para uso em outros lugares no aplicativo.

Para usar o roteador em um componente Vue, podemos simplesmente adicionar o componente <router-view>> em nosso modelo. O componente <router-view>> é responsável por renderizar o componente correto com base na rota atual.

Por exemplo, se quisermos que nosso aplicativo use o roteador, podemos fazer o seguinte no arquivo main.js.

    
        import Vue from 'vue';
        import App from './App.vue';
        import router from './router';
        
        Vue.config.productionTip = false;
        
        new Vue({
          router,
          render: (h) => h(App),
        }).$mount('#app');
    

Aqui, estamos importando o roteador e passando-o para a instância Vue como uma opção. Agora, quando navegamos para a página inicial ou para a página de contato, o componente correto será renderizado automaticamente pelo componente <router-view>.