쉽게 말해 탭메뉴 생각하면 된다. 페이지를 새롭게 로딩하지 않고 여러 페이지를 불러올때 사용하는 것..
자세한 것은 미래의 내가 이 router에 정리해서 이 바로 아래에 경로를 달
것임.
vue add router 입력
vue add router를 해주면
자동으로 src밑에 router폴더 생성, 그 밑에 index.js생성됨.
router 밑에 자동으로 생성된 index.js는 모든 router의 구성환경 (configurations)를 포함한다.
[index.js] - index.js가 자동으로 생성되면서 아래 내용이 채워져 있음 -
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ //객체 배열 선언, 이 배열은 애플리케이션 경로를 나타냄. { // '/'경로를 가진 route object 는 우리의 기본 URL을 의미 path: '/', //경로 name: 'Home', //name속성은 경로의 이름을 의미 component: Home //component속성은 사용자가 이 경로를 방문할 때 렌더링될 구성 요소를 의미, 이 경로에서 홈페이지를 렌더링 한다. }, {
path: '/about', name: 'About', //about은 거의 동일한 논리이나 구성요소를 직접 가져오는 대신 webpack의 코드 분할 기능을 통해 가져옴. // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
역시 vue add router해주면
src
밑에 자동으로 views생성, About.vue, Home.vue가 아래와 같이 소스코드가 자동으로 채워져서 생성된다.
<template> <div class="about"> <h2>This is an about page</h2> </div> </template>
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue'
export default { name: 'Home', components: { HelloWorld } } </script>
<template> <div class="home"> Hello! Welcome jian homepage ♡ <table> <tr> <th> 이름 </th> <th> 직업 </th> <th> 성별 </th> <th> 이메일주소 </th> </tr> <tr> <td>박혁거세</td>
<td>개발자</td> <td>뇨자</td> <td></td> </tr> </table> </div> </template> <!-- vuejs 컴포넌트에 스타일 적용하는 방법 --> <!-- style에 scoped속성을 부여하면 컴포넌트 내부 스코프에만 적용되므로 다른 컴포넌트가 간섭을 못한다., 이때 style은 element 속성값을 사용해 적용하도록 한다. --> <style scoped> </style>
--
주의!! 아직 style은 공부 안해서 테이블 정렬을 못시켰습니다. ㅠㅠ --
src > router > index.js로 이동
[index.js]
- profile 컴포넌트와 경로 추가하기
import { createRouter, createWebHistory } from
'vue-router' import Home from '../views/Home.vue' import Profile from '../views/Profile.vue' const routes = [ //객체 배열 선언, 이 배열은 애플리케이션 경로를 나타냄. { // '/'경로를 가진 route object 는 우리의 기본 URL을 의미 path: '/', //경로 name: 'home', //name속성은 경로의 이름을 의미 , 이거 바꿔도 아무 의미 없음. component: Home //component속성은 사용자가 이 경로를 방문할 때 렌더링될 구성 요소를 의미, 이 경로에서 홈페이지를 렌더링 한다. }, { path: '/profile', name: 'profile', component: Profile }, { path: '/about', name: 'About', //about은 거의 동일한 논리이나 구성요소를 직접 가져오는 대신 webpack의 코드 분할 기능을 통해
가져옴. // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
src > components > static폴더 > image폴더를 따로 만들어 이미지 넣기.
여기까지 구현된 화면
[메인접속시 첫 화면]
[나의 프로필 눌렀을때]
-아직 css적용 전이라 테이블이 왼쪽으로 이동했네유..ㅠㅠ -
target="_blank" rel="noopener" 란?
- 미래의 내가 정리할 내용..현재의 나는 좀 쉬자. 'ㅅ'
혹시 라우터 설정중에 export 'default' (imported as 'Vue') was not found in 'vue'
라는 에러가 발생했다면....
본인 vue CLI는 3,4인데 그 이전인 2이하로 라우터를 설정하였을 경우 이런 에러가 발생할 수 있다.
본인이 설정한 버전에 맞게 라우터를 설정하면 됨. 나는 CLI 4 인데 2이하 방식으로 설정하다 아래와 같은 에러가 발생하여서 4에 맞게 라우터 설정을 바꿔줌...
