Vue Router

라우터 설치

$ npm i vue-router@4

라우터 연결

• use를 통해 라우터를 연결

// main.js

import { createApp } from 'vue'
import App from './App'
import router from './routes/index.js'


createApp(App)
  .use(router)
  .mount('body')

• createRouter 를 사용하여 라우터를 구성하여 export
• createWebHashHistory 를 사용하여 Hash모드 적용

// ./routes/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import About from './About'

export default createRouter({
  // Hash, History(서버 셋팅 필요)
  history: createWebHashHistory(), // Hash 모드
  // pages
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

• 페이지 redirect

// ./routes/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import About from './About'

export default createRouter({
  // Hash, History(서버 셋팅 필요)
  history: createWebHashHistory(), // Hash 모드
  // pages
  routes: [
    {
      path: '/',
      redirect: '/about' // 루트 경로로 접속시 자동으로 /about 경로로 페이지 전환
    },
    {
      path: '/about',
      component: About
    }
  ]
})