Vue Router v4.x

 

1. Vue Router 설치

npm install vue-router@4

 

 

2. Vue Router 사용

 

main.js

import { createApp } from 'vue'
import App from './App.vue'
import CommonComp from '@comp/common'
import Store from '../store'
import Router from '../router'

createApp(App)
  .use(CommonComp)
  .use(Store)
  .use(Router)
  .mount('#app')

 

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './modules/index.js'

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


export default router

 

3. Routes 선언

 

Route Name 상수 정의 : src/constants/route.json

{
    "Main": "Main"
}

 

Route Path 정의 : router/module/index.js

import ROUTE from '@constants/route.json'

const MainPage = () => import(/* webpackChunkName: "group-main" */'@pages/main/MainPage.vue')

export default [
  {
    path: '/',
    name: ROUTE.Main,
    component: MainPage
  }
]

 

 

---

참고자료

 

https://next.router.vuejs.org/

Vue Router