# vue router
Vue vue-router Navigation Guards을 이용한 데이터 호출 시점
Vue의 라이프 사이클과 같이 beforeEnter()를 사용하게 되면, 라이프 사이클이 붙기 전, 라우팅을 할때의 시점에서 무언가(?)를 할 수 있게 된다.따라서 HOC와 Mixin의 연장선으로 이번엔 라우터 가이드를 활용해 created()로직을 사용해보려고 한다.
[프로젝트] 목록페이지 검색조건 유지하기!
✅ 구현해야할 기능 목록페이지 ➡️ 상세페이지 ➡️ 목록페이지 목록페이지 재입장시 이전 검색조건이 유지가 되어있어야 한다. ✅ 나는 이 기능을 어떻게 구현하려고 했나? session storage를 활용해 검색조건을 저장해두고, 목록페이지로 다시 돌아왔을 때 저장해
Vue router 컴포넌트 불러오기(동적, 정적)
vue-router에서 컴포넌트를 import 할 때, 정적과 동적 2가지 방법으로 import할 수 있다.StaticComponent는 정적 import로, 앱이 시작할 때 모든 컴포넌트를 한 번에 불러와 로딩 시간이 길어질 수 있다.DynamicCompoent는 해
Vue - Router
Vue-Router 사용하기 vue-router 설치 src/routes/index.js 파일 생성 후 작성 main.js에 router 플러그인 적용 라우터 사용 `: 페이지 링크, ` 태그와 유사 ``: 페이지 렌더링 부분 $router: page에 대한 제어
3. Vue Router
Vue Router 생성 npm install vue-router 를 vscode에서 터미널에 입력 아래와 같이 router.js 생성 후 코드 붙여넣기 (추후 변경 필요)
07-01 Vue router
https://lightning-zoo-4fc.notion.site/7-1-62ef861bac814606b802610c28dbc7db?pvs=4
vue-router4 state객체로 페이지 사이 데이터 전달
vue-router에서 데이터를 전달하는 일반적인 방법은 두 가지이다.queryparams이 중에서 params은 본래는 path에 :id꼴로 값을 적어넣음으로써 데이터를 넘길 수 있었다. 즉, url에 어떤 데이터도 노출시키지 않고도 다른 페이지로 데이터를 넘기는 것
Vue Router
Vue의 공식 라우터SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능을 제공라우트(routes)에 컴포넌트를 매핑한 후, 어떤 URL에서 렌더링 할지 알려줌즉, SPA를 MPA처럼 URL을 이동하면서 사용 가능SPA의 단점 중 하나인 "URL이 변경되지 않는다"를 해결
Nuxt 파일 라우팅
Nuxt는 파일 트리 구조를 기반으로 vue-router를 자동 생성해 줌이런 파일 구조를 가졌을 시 Nuxt에서 자동 변경된 vue-router파일 명에 \_를 붙여서 사용함이런 파일 구조를 가졌을 시 Nuxt에서 자동 변경된 vue-router
Vue3 - 뷰 라우터 Vue Router
뷰 라우터에 대한 개념은 인터넷에 널리고 널렸으며 Vue.js를 해본 사람들은 익혀있으니 개념 설명 따위는 스킵하고 적용과 사용법을 익혀본다.우선 기존의 프로젝트에서 src/views 디렉토리를 생성하고, HomeView.vue 와 AboutView.vue를 만들어둔다
Vue Router Params 전달
목록에서 상세조회로 갈 때, 스케줄의 id값을 넘겨 상세조회로 넘어가려고 한다.패스 설정에서 :id 를 사용해 상세 조회시 url에 각 스케줄의 id 값을 띄울 수 있도록 한다.목록에서 상세로 router push 를 할 때, 파라미터로 아이디 값을 함께 넘겨준다. p
Vue router 개념 정리
클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다. URL 변경 시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소영역만 갱신한다(SPA 언어의 큰 특징). 따라서 유연하게 페이지 전환이 가능하다. vue