1.router를 이용한 app.vue 메인 설정 방법

 

-프로젝트 작성 중 어떠한 원리로 현재 메인 화면으로 잡고 있는 MainView.vue가 보여지는 건지 확인하고 싶었다.

 

-main.js의 경우 다음과 같이 되어 있다.

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

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

 

router 를 이용해 App.vue를 이용해 앱을 생성한다는 거다.

 

그럼 App.vue에서 어떻게 부르는가.

<template>

  <router-view/>
</template>

<style scoped>
  @import '../src/css/main.css';
</style>

 

원래 예시 코드라면 nav 태그가 있고 아래에는 하드코딩 style가 있다. 일단 나는 css를 파일로 따로 빼기 때문에 아래 처럼 import하는 식으로 변경했다.

 

그럼 여기서 부르는 건 무엇인가? 바로 router-view 태그이다.

이 router-view가 없다면 일단 페이지 호출이 안된다. 이 태그가 있다면 /src/router/index.js가 불러와지며 이것이 메인이 된다.

그럼 index.js는 어떻게 되어 있는가.

 

import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../views/MainView.vue'

/*const routes = [
  {
    path: '/',
    name: 'main',
    component: () => import('../views/MainView.vue')
  }
]
*/

const routes = [{
  path: '/',
  name: 'main',
  component: MainView
}]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

const routes 변수를 이용해서 해당 페이지들을 배정한다.

일단 맨 처음 보여지는 페이지라면 path 항목에 '/'만 놔둔다. 만약 파라미터를 따로 줘서 메뉴 별로 나눈다면 path 항목에 '/페이지이름'을 적는다. ex)'/home', '/about', '/login'

연결되는 vue 파일은 component에 적는다. 이 부분은 적는 방식이 2가지이다.

첫번째는 위 import 부분에 적는 것

import MainView from '../views/MainView.vue'
/*import 호출명 from 'vue 파일 명 경로'*/

 

두번째는 component 에 직접 입력 하는 방법이다.

component: () => import('../views/MainView.vue')

/*component: () => import('vue 파일 경로')*/

 

이를 통해 각 파일 경로를 부른다.

 

이렇게 필요 페이지를 부른다고 독학?적으로 분석해봤다. 사실은 더 복잡할 수도 있다. 이 부분은 나중에 책을 따로 보던가 해야할 것 같다.