# vue router

41개의 포스트
post-thumbnail

[ vue-router ] history mode

리다이렉트 및 없는 경로 처리적절한 서버 구성 없이 단일 페이지 클라이언트 측 앱이기 때문에 사용자가 http://oursite.com/user/id브라우저에서 직접 액세스하면 404 오류가 발생한다.서버에서는 해당 URL이 클라이언트에서 관리가 되기 때문에

2022년 6월 26일
·
0개의 댓글

코드 스플리팅 (code splitting)

코드 스플리팅이란?우리가 js로 개발하게 되면, 따로 코드를 분리하지 않는 이상..하나의 파일에 모든 로직이나 코드들이 들어가있게 된다.한 두개면 상관 없겠지만 점차 규모가 커질수록 js 파일 용량도 커질 것이고,특히 SPA(싱글 페이지 어플리케이션)의 장점이 하나의

2022년 6월 26일
·
0개의 댓글

[FrontEnd] Vue 라우팅 & 백엔드 통신

npm 사용시npm install vue-routeryarn 사용시yarn add vue-routersrc/router: 라우팅을 위한 디렉토리 생성src/router/index.js: vue 컴포넌트를 import한 뒤 경로를 설정main.js: router.js 폴

2022년 6월 19일
·
0개의 댓글
post-thumbnail

[TIL] 프론트엔드 Day 40

조금씩 꾸준하게

2022년 5월 16일
·
0개의 댓글

vue, Proxy를 이용한 Router페이지 API CORS 우회

메인페이지에서 cors를 우회하여 open api 에서 데이터를 받아오고 신이났지만 router를 이용해 넘어간 다음 페이지에서 404 에러가 날 맞이해주고 있었다.본능적으로 vue.config.js 에 입력한 proxy가 잘못된 것 같은걸 느꼈지만 console을 찍

2022년 5월 16일
·
0개의 댓글

[VUE.js] vue 게시판 만들기(2)

✅ vue router 데이터 종류 vue router로 데이터를 전달할 때 두가지 있다. query JSON 형태이며 query string 형태로 전달되는 파라미터 $router.query로 접근 query string url 뒤에 붙는 키와 값으로 구성된 파라미터들을 의미. 서버에 추가적인 정보를 전달할 수 있다. 쿼리 스트링으로 값을 전달하고 싶을...

2022년 5월 15일
·
0개의 댓글
post-thumbnail

VueJS Axios, Vue-router

Axios HTTP 통신 : axios Vue에서 권고하는 HTTP 통신 라이브러리는 Axios이다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어있고, API가 다양하다. axios.get(URL

2022년 5월 12일
·
0개의 댓글

TIL_Vue #3 Router

Vue 학습 내용을 정리한다.

2022년 5월 11일
·
0개의 댓글
post-thumbnail

[Vue.js] vue-router.js cdn 오류

cdn 주소를 쓰고 있었는데 갑자기 안됬음https://v3.router.vuejs.org/installation.html홈페이지에도 잘못 기재 되있는거 같음 (v3.x)이걸로 하니까 됨..

2022년 2월 25일
·
0개의 댓글

[vue.js] Vue Router 정리

Vue Router 정리

2022년 2월 9일
·
0개의 댓글
post-thumbnail

[Vue.js] vue-router - 리디렉션 및 별칭

1. 리디렉션 기본 명명된 경로 리디렉션 동적 리디렉션 상대 리디렉션 2. 별칭 alias 옵션으로 지정할 수 있다. 위와 같이 별칭을 지정하면 /users, /users/list, /people 모두 /users와 연결된 컴포넌트를 렌더링한다. 매개변수가

2022년 1월 16일
·
0개의 댓글
post-thumbnail

[Vue.js] vue-router - 라우트 명명 (경로, 뷰)

라우트 작성 시 name 옵션을 통해 경로 이름을 지정할 수 있다. 1. 경로 이름 정의 선언적 방식 프로그래밍 방식 2. 뷰 이름 정의 ` 태그의 name` 속성에 뷰이름을 작성하여 정의할 수 있다. 작성하지 않는 경우 name이 default인 컴포넌트와 매

2022년 1월 16일
·
0개의 댓글
post-thumbnail

[Vue.js] vue-router - 프로그래밍 방식 내비게이션

``를 사용해 선언적 바익으로 내비게이션을 만드는 방법 외에도 프로그래밍 방식으로 내비게이션을 만들 수 있다. 1. 다른 URL로 이동 (= window.history.pushState) 선언적 방식 프로그래밍 방식 router.push()는 다양한 인자를 매개변

2022년 1월 16일
·
0개의 댓글
post-thumbnail

[Vue.js] vue-router - 동적 라우트, 중첩 라우트

1. 동적 라우트 express로 라우터 개발 시에 router 경로로 '/user/:id'와 같이 파라미터 값을 넘겨주어 라우팅했던 경험이 있는데 vue-router에서도 비슷한 방식으로 동적 라우팅이 가능하다. 1) Param 라우터 path에 작성하는 동적 세그

2022년 1월 16일
·
0개의 댓글
post-thumbnail

[Vue.js] vue-router v4.x with Vue3 (1)

https://next.router.vuejs.org/guide/ 1. vue-router란 공식 사이트에 의하면 Vue Router는 Vue.js의 공식 라우터로 Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있다

2022년 1월 16일
·
0개의 댓글
post-thumbnail

Vue > Router란? [2부]

각 Router의 생명 주기를 파악한다면 웹 페이지 경로 이전을 더 매끄럽게 작업 할 수 있다.beforeRouteLeave : 기존 Component의 제거 전에 호출.beforeEach : 기존 Component가 제거된 후 새로운 네비게이션이 시작될 때 호출.be

2022년 1월 6일
·
0개의 댓글
post-thumbnail

<Vue.js> Vue 개발환경 설정

Vue 환경 설정 Vue CLI v4.5.13 Vue 2.x, npm 설치/실행 Vue CLI 2.x vs CLI 3.x 명령어 웹팩 설정 파일 노출 O(2.x) vs 노출 X(3.x) 프로젝트 구성 GitHub의 템플릿 다운로드(2.x) vs 플러그인 기반으로 기능 추가(3.x) ES6 이해도 필요 X(2.x) vs 필요 O(3.x) 자세한 내...

2021년 10월 25일
·
0개의 댓글
post-thumbnail

[Vue] vue-router 사용하기

직접 폴더와 파일을 생성해도 된다.1\. router 폴더 생성2\. index.js 파일 생성import Vue from "vue";import VueRouter from "vue-router";import HelloWorld from '@/components/Hel

2021년 9월 6일
·
0개의 댓글
post-thumbnail

Vue+Vuetify+Vue-Router 시작하기 - 3

다른거 할줄모르고 그냥 남자답게 vue-cli로 설치할거임.끝.(위에서 나온 preview로 설치했다가 vite.js가 뭔지 몰라서 한참 헤맴 디폴트로 빠르게 넘어가자.)설치가 완료되면 해당 메세지가 뜬다.그리고 뷰티파이를 설치하고나면 우렁각시가 내가 쓰지도 않은 코드

2021년 8월 6일
·
0개의 댓글
post-thumbnail

Vue+Vuetify+Vue-Router 시작하기 - 2

잉여주제에 기억이 소거되는 시간도 빠른 메모리를 가진 나님은 역시 갓 구글님께서 인수하신 유투브의 컨텐츠들을 참고하여 많은 지식을 습득할 수 있었다. 하지만 기억이 소거되는 시간이 TLC 보다 빠른 나의 두뇌는 휘발성 메모리인지라 이것을 장기간 담아내기 어려워 이 블로

2021년 8월 6일
·
0개의 댓글