Olá dev, hoje o papo vai ser sobre Vue, mais especificamente sobre Vue Router.
Recentemente descobri um que existe duas formas de se fazer o router, a primeira, que carrega todos os módulos "páginas" no primeiro load e a outra que é onde cada módulo carrega conforme você acessa a página.
Vamos aos exemplos…
import {createRouter, createWebHistory} from "vue-router";
import LoginView from "../../vue/view/login/LoginView.vue";
import AboutView from "../../vue/view/about/AboutView.vue";
const routes = [
{
path: "/sobre",
name: "about",
component: AboutView
},
{
path: "/login",
name: "login",
component: LoginView
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
Nesse exemplo, assim que carregar a página no primeiro load, vai ser carregado os módulos LoginView e AboutView, junto com todos os seus componentes internos.
A desvantagem dessa forma de utilizar essa forma é que o primeiro load fica com toda a carga dos módulos e componentes que estão sendo utilizados em qualquer rota do arquivo.
Em meus estudos recentes, onde eu estava melhorando o sistema de autenticação da minha aplicação no Vue, e me deparei com uma outra forma de se fazer isso, que basicamente você ira dar o import no atributo component, ficando assim.
import {createRouter, createWebHistory} from "vue-router";
const routes = [
{
path: "/sobre",
name: "about",
component: () => import("../../vue/view/about/AboutView.vue"),
},
{
path: "/login",
name: "login",
component: () => import("../../vue/view/login/LoginView.vue"),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
Dessa forma, não damos o import no topo do arquivo, e o navegador vai carregar o módulo do LoginView e seus compoentes, somente quando a página de login for acessada.
Hoje o assunto era esse, algo rápido mesmo, até mais dev!
Top comments (0)