inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

[실습] 라우터 네비게이션 가드 실습 안내

라우터와 뷰 인스턴스질문...

260

정태웅

작성한 질문수 9

1

안녕하세요 캡틴판교님 강의 정말 유익하게 듣고있습니다.

1.  this.$router와 this.$store 같은경우에 스토어나 라우터 인덱스에서 뷰 인스턴스와 연결을 하여서 뷰 인스턴스 내에서만 사용할수있고 router sotre 에서는 저런식으로 사용하지 못하는것까지 이해했습니다. 

그런데 뷰 인스턴스 내에서 라는 말이 정확하게 이해가 되지않습니다.  어떻게 하면 뷰 인스턴스내에 포함을 시키고 구분할수있는 것인가요??

2.  createListView HOC에서 컴포넌트 가드를 사용하여

아래 코드 

export default function createListView(name) {
  return {
    // 재사용할 인스턴스(컴포넌트) 옵션들이 들어갈 자리
    name,
    beforeRouteEnter : (to, from, next) => {
      bus.$emit('start:spinner');
      // #1
       this.$store.dispatch('FETCH_LIST', to.name)
        .then(() => { // #5
          bus.$emit('end:spinner');
          next();
        })
        .catch(err => console.log(err));
     },
    render(createElement) {
      return createElement(ListView);
    }
  }
}

사용하였더니 beforeRouteEnter 내에서 this.$store로 접근할시에는 인식이 안되더라구요 

그래서 store를 export 해주고 this.$store -> store 로 해주었더니 잘작동합니다. 

왜 beforeRouterEnter 안에서는 this.$store가 인식이 안되는 지궁금합니다 !

그리고 라우터 가드와 컴포넌트 가드는 똑같다고 생각해도 되는건가요??

3. 캡틴판교님 nuxt강의는 계획에 있으신지 궁금합니다!

nuxt의 asyncData를 이용하면 라우터가드를  따로 설정해주지 않아도 되는건지 궁금합니다

vue-router vue-instance vuejs javascript

답변 1

0

캡틴판교

안녕하세요 태웅님, 좋은 질문 주셨네요 :)

1. 인스턴스 내라는 의미는 컴포넌트 파일에서 `this`라는 키워드로 접근하여 사용하는 것을 의미합니다. this.$router / this.$store 처럼요 :)

2. beforeRouterEnter는 컴포넌트 내에서 페이지에 진입하기 전의 라우터 네비게이션 가드를 정의할 수 있는 속성입니다. 페이지에 진입하기 전이기 때문에 컴포넌트의 this로 접근할 수 없습니다 :)

3. nuxt 강의를 물어보시는 분들이 많아서 바로 다음 강의를 Nuxt로 준비해볼 생각입니다. 늦어도 7~8월까지는 개시할 수 있도록 준비해 볼게요. 문의해 주셔서 감사합니다 :)

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

51

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

145

1

깃허브 권한 요청 드립니다

0

164

1

깃허브 권한 요청 드립니다

0

169

1

깃허브 권한 요청 드립니다.

0

154

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

210

1

ide 타입추론 기능 사용할 수 없을까요??

0

215

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

232

1

Vue3로 진행중입니다

1

340

1

Vue router-link 사용시 같은 url이면

1

509

1

vue3 에러 메세지...

1

676

2

id ="app" 중복

0

273

2

use undefined 에러가 나옵니다.

1

323

2

깃허브 권한 요청드립니다.

1

360

2

권한요청드립니다.

1

302

2

Vue3에서 구글 애드센스 탑재하기

1

438

2

코드가 정상 작동 되는건지 ...

1

305

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

245

1

vuex 적용시 질문

1

292

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

385

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

456

2

권한요청 드립니다!

1

275

2