[Vue.js] 뷰 라우팅 feat. npm vue-router

[Vue.Js] 뷰 라우팅 feat. npm vue-router

 

🌈  라우팅이란 ?

서버에서 웹 페이지를 미리 받아 놓고 

새로고침 없이 원하는 부분만 해당 화면을 갱신하는 기술,

다른 말로 SPA (Single Page Application)

 

🌈  vue-router?

뷰에서 라우팅을 사용할수 있도록

공식 라이브러리로 지원

 

⭐️  설치 (vue-router 4 버전 이후 설치)

npm i vue-router@4

 

⭐️  기본 형태

[router.js 파일]

import { createWebHistory, createRouter } from "vue-router";
import 컴포넌트1 from './components/.....vue'
import 컴포넌트2 from './components/.....vue'

const routes = [
  {
    path: "/원하는 링크주소",
    component: 컴포넌트1(뷰파일1)
  },
  {
     path: "/원하는 링크주소2",
    component: 컴포넌트2(뷰파일2)
  }
];

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

export default router;

[main.js 파일]

import { createApp } from 'vue'
import App from './App.vue'

//라우터 경로에서 불러오기
import router from './router.js';

//.use(라우터)를 통해 라우터 사용
createApp(App).use(router).mount('#app')