Router사용하기

터미널에

npm install vue-router@4

을 입력해서 router를 설치해준다.

그러곤, main.js에서 라우터 셋팅을 해주어야한다.

createApp(App).use(라우터만든거).mount('#app')

위처럼 쓰는데, 라우터만든거를 넣을 때, 코드가 길어서 scr폴더에 router.js파일을 만들어서 거기서 작성해보자.

//(src/router.js)
import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

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

export default router;

위를 참고해서 routes부분만 수정해보면

import { createWebHistory, createRouter } from "vue-router";
import List from './components/List.vue'

const routes = [
  {
    path: "/list",
    component: List,
  }
];

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

export default router;

List컴포넌트를 import해와서 누군가가 /list로 접속하면 List component를 보여주게끔 하곤, export default router한 걸

라우터만든거에 적어주면 된다.

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

createApp(App).use(router).mount('#app')

이렇게 적어주면 main.js설정은 끝난다.

 

이제, app.vue에서

<router-view></router-view>

이런 식으로, html태그를 적어주면 된다. 여기까지하고 /list로 접속하면 아무것도 안보여주는데 이유는 props가 제대로 전송되지 않아서 그렇다. 그래서

<router-view :블로그글="블로그글"></router-view>

여기다가 props를 전송해주면 된다.

 

만약, 페이지를 더 나누려고, Home컴포넌트를 만들었으면,

import List from './components/List.vue';
import Home from './components/Home.vue';

const routes = [
  {
    path: "/list",
    component: List,
  },
  {
    path: "/",
    component: Home,
  }
];

이렇게 router.js파일만 건들이고, app.vue엔 적어놓은 router-view태그가 모두를 경로에 맞게 보여준다.

 

마지막으로, url에 list라고 입력하는게 불편하면,

<router-Link to="/list">리스트페이지</router-Link>

이런 식으로, a태그 마냥 다른 페이지 이동링크를 만들 때 사용할 수 있다.