1. 라우터설정을 할 js파일 만들기

src폴더 안에 routes폴더 안 index.js 만들기

2. js파일 안에 라우터 설정하기

import { createWebHashHistory, createRouter } from "vue-router";

import HelloWorld from '@/components/HelloWorld.vue';




//라우트 설정하기
const routes = [
    {path: '/', name: "HelloWorld", component:HelloWorld},
    // {path: '/board', name: "Board", component:Board},
]

//라우터 생성(주소표기방식, 라우터설정변수)
const router = createRouter({
    history : createWebHashHistory(), //127.0.0.1:8080/#/login webhistory는 우리가 익숙한 방식
    routes  : routes //위에 routes설정한거랑 같은 이름
})


export default router;

주의할 점은 위에서 import뒤에 오는 변수 명과 routes안 component: 뒤에 올 변수 명이 일치해야 한다.

createWebHashHistory()를 하면 URL 앞에 #이 붙어 새로고침할 때 문제가 발생하지 않는다.
(http://localhost:8080/#/aa)
어떤 문제? 추가로 기술할 것

3. main.js에 가서 라우터 사용설정하기

app.use는 app.createApp과 app.mount사이에 와야 한다.
app.use() 괄호 안에 오는 것은 위에서 어떻게 import하는 가에 따라 달려있다.