Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- KDT 프로그래머스 데브코스 프론트엔드
- 모던 javascript Deep Dive
- react 프로젝트 리팩토링
- 프로그래머스 데브코스
- Vue3 Router
- 프로그래머스 데브코스 프론트엔드 TIL
- frontend roadmap study
- react customHook 예시
- 프로그래머스 K_Digital Training
- 인프런 자바스크립트 알고리즘 문제풀이
- TypeScript 문법 소개
- KDT 프로그래머스
- 모던 자바스크립트 딥다이브
- 모던 자바스크립트 Deep Dive TIL
- 투포인터알고리즘 js
- 모던 자바스크립트 TIL
- 머쓱이
- 프로그래머스 K_Digital Training 프론트엔드
- 개발자 특강
- Vue3
- K_Digital Training
- 모던 자바스크립트 Deep Dive
- 리팩토링 회고
- 우테캠 회고록
- 프로그래머스 데브코스 프론트엔드
- 백준 node.js
- Frontend Roadmap
- useRef 지역 변수
- 백준 js
- useEffect return
Archives
- Today
- Total
프론트엔드 개발자의 기록 공간
[Vue3] Vue(6) Router 본문
❗❗ 데브코스 46일차 (10.04)
6일차에는 Vue에서 Router를 활용하여 페이지 이동을
다루는 방법을 다룬다. 간략하게 Vue Router에 대해 기본적인 개념만 다룰 예정이다.
✅ Installation
npm install vue-router@4
yarn add vue-router@4
Vue3 버전에 맞게 사용할려면 router4버전을 설치해주면 된다. (포스팅 당시 기준)
✅ Router 사용법
- Router 구성 방법
import { createRouter, createWebHistory } from 'vue-router'
import "필요한 컴포넌트 경로"
export default createRouter({
history: createWebHistory(),
routes: [
//루트 경로
{
path: '/',
component: Home,
},
//특정 경로 설정
{
path: '/documents',
component: Docs,
},
// documents에 param 값이 있는 경우
{
path: '/documents/:id',
name: 'docsId',
component: DocsId,
},
//notFound 설정
{
path: '/:notFount(.*)',
component: NotFound,
},
],
})
+ main에서 플러그인으로 등록해줘야 한다.
app.use(router컴포넌트)
path : 경로를 설정해 주고 해당 경로일 때, component를 할당해 주어 보여줄 컴포넌트를 지정해 준다.
위에 지정한 경로에 맞는 컴포넌트를 어디에서 출력할 것인지 나타낼 것인지 정의하기 위해서
App.vue에서 <Router-view/>로 나타낼 위치에 지정해 주면 된다.
- Router Navbar 예시
<Router-link to="/">Home</Router-link>
<Router-link to="/documents">Docs</Router-link>
//위에서 documents param이 있는 경우에 해당하는 라우팅 설정의 name을 넣어준다.
<Router-link
:to="{
name: 'docsId',
params: { id: '7777' },
query: { name: 'minsu', age: 85 },
}"
>
Docs
</Router-link>
<router-link to =""> 링크 이동을 위한 태그 html a태그와 유사하다
- 부가적인 정보
$route 객체 => 현재 페이지에 대한 정보를 가지고 있다.
fullPath => url 전체 경로
path => id값을 포함한 경로
name => 지정한 name
params => 지정한 params
query => 지정한 query
$router 객체 => 페이지에 대한 조작을 할 수 있는 여러가지 메소드가 있다.
<button @click="$router.push('/')">Home</button>
✅ Navigation Guard
각각의 페이지에 접속하기 직전에 동작하는 메소드이다.
페이지에 접근하기 전에 콜백 안에 있는 내용이 실행된다.
대표적으로 로그인을 한 이후나 접근 권한이 있을 때마 실행되어야 하는 페이지들을 관리하기 위해 사용된다.
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
이 외에 다양한 옵션들이 있다.
📖 학습한 내용
- Vue(6)
- Vue Router
- Vue Navigation Guard, 메타필드
- Babel 구성
- PostCSS, Autoprefixer 구성
- Webpack Template 정리
728x90
'프로그래머스 데브코스_FE > TIL' 카테고리의 다른 글
[Vue3] 영화 검색 사이트 프로젝트 (0) | 2022.01.14 |
---|---|
[Vue3] Vue(7) 실습 및 배포 (0) | 2021.11.25 |
[Vue3] Vue(5) 상태관리 (0) | 2021.11.08 |
[Vue3] Vue(4) & Webpack (0) | 2021.10.14 |
[Vue3] Vue(3) (0) | 2021.10.13 |
Comments