Adicionando router VueJs

Uma das principais características do vue é seu modo de single page. Para exemplificar esse modo, vamos adicionar ao nosso projeto o router vuejs. Mais conhecido como router vue.

Realizar Instalação

Realizar a instalação é extremamente simples, basta executarmos o seguinte comando:

npm install vue-router --save

Confira aqui a documentação oficial da instalação:

https://router.vuejs.org/installation.html#direct-download-cdn

Criando lista de rotas

Após a instalação, basta realizar a criação das rotas:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export const router = new Router({
    routes: [
        {
            path: '',
            alias: '/',
            name: 'home',
            redirect: '/dashboard',
            component: () => import('./Layout'),

            children: [
                {
                    path: '/dashboard',
                    name: 'dashboard',
                    component: () => import('./components/Dashboard')
                },
                {
                    path: '/exemplo1',
                    name: 'exemplo1',
                    component: () => import('./components/Exemplo1')
                },
                {
                    path: '/exemplo2',
                    name: 'exemplo2',
                    component: () => import('./components/Exemplo2')
                },
            ],
        }
    ]
});

Agora vamos realizar a importação das rotas no nosso arquivo principal:

import { router } from './router';

new Vue({
router
});

Alterações no projeto atual

Notem que alteramos o projeto criando novos componentes e alterando componente principal:

Adicionados:

• Dashboard
• Exemplo1
• Exemplo2
• Layout

Nosso Layout será responsável pela criação do layout do sistema, onde contem o menu e a logo.

Alteramos o App.vue para suportar a navegação entre componentes. Sendo assim confira a imagem abaixo:

Confira o projeto completo no github:

https://github.com/aluizrech/vue-internationalization