Vue.js 실습 part.4

저번 포스팅에서는 header, home, about 페이지를 만들었고,

이 페이지들을 app.vue에서 보여주려고 까지 하였다.

그럼 이번 포스팅에서는 이것들을 조합하여 페이지로 보여지도록 해볼것이다.

 

저번 포스팅에서 app.vue에 router-view를 명시해두었는데, 이것을 사용하기 위해서는 또 다른 작업이 필요하다.

router를 설치는 하였고, 다음은 라우터의 동작을 제어할 파일을 만들것이다.

/test/src/router.js 파일을 만들어보자.

여기에는 다음과 같이 작성을 한다.

import Home from "./views/Home-test";

import About from "./views/About-test";

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

const router = createRouter({

    history : createWebHistory(),

    routes: [{

        path: "/",

        component: Home

    },

    {

        path: "/about",

        component: About

    }

    ]

});

export default router;

중요한 부분은 아래 routers 부분이다.

localhost:8080/ 로 들어오면 import에서 명시된 Home으로 이동할것이고,

localhost:8080/about 로 들어오면 import에서 명시된 about으로 이동할것이라고 router를 여기서 잡아준다.

 

그럼 이것또한 main.js에서 사용하도록 명시를 해줘야한다.

 

main.js에서

import router from './router'

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

이렇게 path를 잡고

아랫부분에 라우터를 추가해주면 된다.

(기존에는 createApp(App).mount('#app') 이렇게 되어있는 것에 추가를 하였다.)

 

 

결국 실제 보여질 페이지인 App.vue에서는 Header가 한줄로 보이지만 실제로는 Header.vue를 가져와서 사용하기 때문에 코드가 깔끔하고 명시적으로 사용을 할수가 있다.

 

여기까지 진행하고 이전 포스팅때처럼 

npm run serve

라고 하면 터미널 창에 아래와 같은 에러가 나온다.

4개의 에러중에 두번째 에러를 제외하고는 비슷한 느낌이다.

 

2번째 에러는 찾아보니 옵션을 주석으로 달아줘야한다.

router.js에서

const router = 라고 router를 명시해둔 줄에 이렇게 주석을 추가한다.

const router = new VueRouter({ // eslint-disable-line no-unused-vars

그리고 나머지 3개의 에러는 html에서 사용하는 이름과 충돌하지 않게 2개 이상의 단어를 조합해서 파일명을 만드는것을 추천하는 그런 에러이다.

그리하여 파일들을 home-1.vue , about-1.vue, Header-1.vue로 변경하였다.

 

그리고 나서 다시 ip:8080/으로 들어가서 확인을 하면 아까 vue의 기본 페이지가 지금은 아래와 같이 변경 되게 된다.

헤더는 현재 bootstrap이 잘 적용이 안되거나 상태가 불량이라 적용은 안되었지만 그래도 값을 불러오고 있고,

아래 값 역시 home.vue 가 보이는것을 알수 있다.

만약 ip:8080/about으로 들어가면 그에 해당 되는 페이지가 나올것이다.

 

실습을 하다가 vue2,3 버전 관련해서 바뀐 문법들이 있고 변경해줘야하는 부분들이 꽤 많아서 애를 먹었지만,

포스팅에 나와있는대로만 잘 값을 넣어주면 문제없이 셋팅을 해볼수가 있다.

 

다음에 기회가 된다면 추가 웹 작업을 더 진행해보도록 할것이다.