44일차 배운 것 정리

목차

1. Vue 7화

1. Vue Router

1-1. 기본적인 Router 사용법

• router-link
• <a> 태그와 가장 유사한 태그

• router-view
• 페이지를 출력해줄 영역을 지정하는 태그

• routes 경로에 따른 compontent 지정
• routes =[ ] 를 통해, 경로와 component를 지정할 수 있다.

• app에 router 등록
• const router = VueRouter.createRouter({ options }) 함수로 지정
• options 객체의 history: VueRouter.createWebHashHistory() 로 브라우저의 history를 관리
• routes를 등록한다.
• app.use(router) 로 router 등록

• 두가지 객체를 통해 실사용
• .$route
• 현재 페이지 정보를 담고 있음
• 현재 url , params 등
• .$router
• 페이지간 이동을 위한 객체
• history.push() 등의 기능

1.2. 404 notFound 페이지 처리

• routes 배열의 path를 정규표현식으로 처리
• path : “/:notFound(.*)”
• ( 정규표현식 내용 ) ⇒ .* 하나 이상의 어떤 문자라도 발견시 notFound path로 처리한다!
 

1.3 $route, $router 사용하기

• $router 는 페이지간 이동을 위한 내장 기능
• a-tag 이동 방식이 아닌, 이벤트를 통한 페이지 이동처리 가능
• ex) <button @click="$router.push('/')"> go Home </button>

• $route
• 현재 페이지에 대한 정보를 가진 객체
• fullPath, hash, href, matched, meta, params, path, query 등의 속성을 가짐
• fullPath - 현재 url 전체
• path - parms가 없는 현재 path
• query - path뒤의 모든 query정보
• 동적 parameter로 페이지 접근하기
• s
• roures.name 을
• name과 같이 params, query등의 정보를 같이 객체 형식으로 쉽게 지정할 수 있다.
• 그렇지 않다면 ( /about?name=leon? …)

2. Vue Router 네비게이션

2-1.