# vue router

49개의 포스트

[vue] vue router 로 데이터 전달

router에 params 전달하기

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

[vue-router] html5 히스토리 모드

vue-router가 경로를 처리할 때 hash mode와 history mode가 있다. vue-router의 기본 모드는 hash mode이다.URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다. 해시를 제거하기

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

Vue) 17. nested routes를 사용해보자..

/detail/0/author로 접속하면, detail 페이지 내에 작가소개란을 보여주고/detail/0/comment로 접속하면, detail 페이지 내에 댓글을 보여준다.특정 페이지 내에서 또 라우트를 나누는 경우를 nasted routes라고 한다.저렇게 다른 u

2022년 8월 10일
·
0개의 댓글
·
post-thumbnail

Vue) 16. url에 파라미터를 주어 동적 url을 만들어보자..

url에 파라미터 주는 법 ) 앞의 글에서는 없지만 간단하게 말하자면, 게시글 리스트 페이지에서 해당하는 게시글로의 이동은 url을 활용한다. 게시글 리스트 페이지 url http://localhost:8080/list 첫번째 게시글 상세 페이지 http://lo

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

Vue) 15. vue-router4 설치 및 세팅, 사용까지..

npmnpm install vue-router@4yarnyarn add vue-router@4우선 아무곳이나 router.js 파일을 만들고 아래와 같이 코드를 붙여넣어준다.난 src폴더 안에다가 router.js를 만들었다.문법은 중요하지 않다. vue-router를

2022년 8월 8일
·
0개의 댓글
·

[Vue.js] Vue Router (라우터)

import { createRouter, createWebHashHistory } from "vue-router"; ---> 1번) 이렇게 넣고, 2번처럼 사용한다.import Home from './Home';import Movie from './Movie'im

2022년 7월 10일
·
0개의 댓글
·
post-thumbnail

Vue CLI와 Vue router

SFC / Vue CLI / Pass Props & Emit Events / Vue Router

2022년 7월 9일
·
0개의 댓글
·
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개의 댓글
·