FrontendVue

[Vue] - Router

라이브러리 설치

npm install vue-router
import {createWebHistory, createRouter} from "vue-router";

const routes = [
  {
    path: "/",
    name: "home",
    component: () => import('../pages/ChatRoom.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router;
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/router.ts";

createApp(App)
  .use(router)
  .mount('#app')
<script setup lang="ts">
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

vue 프로젝트내에서 다른 페이지로 이동할때 a 태그를 이용하게 되면 전체 페이지가 리로딩 되게 됩니다. SPA 환경에서는 초기 로딩시 Web 관련 리소스를 다 가져오는데 전체 페이지 리로딩이 발생하면 많은 비효율을 가져오게 됩니다.

다행히 vue-router 가 적용된 프로젝트에서 다른 경로로 이동하고 싶을 경우에는 a 태그 대신 router-link 를 사용하면 화면 리로딩 없이 SPA 내에서 페이지 전환이 이뤄지므로 문제가 발생하지 않습니다.

Share