inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

UX를 고려한 데이터 호출 시점 요약 정리 및 추가 고려 사항 안내

router guard 오류 질문

188

조찬민

작성한 질문수 5

1

import Vue from "vue";
import VueRouter from "vue-router";
import ItemView from "../views/ItemView.vue";
import UserView from "../views/UserView.vue";
import ListView from '../views/ListView.vue';
import bus from '../utils/bus.js';
import store from '../store/index.js';

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/news"
    },
    {
      path: "/news",
      name:'news',
      component: ListView,
      beforeEnter(to,from,next) =>{
        bus.$emit('start:spinner');
        store.dispatch('FETCH_LIST'to.name)
          .then(() => {
            bus.$emit('end:spinner');
            next();
          })
          .error(error => console.log(error))
      }
    },
    {
      path: "/ask",
      name: 'ask',
      component: ListView,
      beforeEnter(tofromnext) => {
        bus.$emit('start:spinner');
        store.dispatch('FETCH_LIST'to.name)
          .then(() => {
            bus.$emit('end:spinner');
            next();
          })
          .error(error => console.log(error))
      }
    },
    {
      path: "/jobs",
      name : 'jobs',
      component: ListView,
      beforeEnter(tofromnext) => {
        bus.$emit('start:spinner');
        store.dispatch('FETCH_LIST'to.name)
          .then(() => {
            bus.$emit('end:spinner');
            next();
          })
          .error(error => console.log(error))
      }
    },
    {
      path: "/item/:id",
      component: ItemView
    },
    {
      path: '/user/:id',
      component: UserView
    }
  ]
});

현재 저의 routes/index.js의 파일입니다.

vscode상에는 오류가 없다고 나오는데 

크롬 콘솔창에서 news/ask/jobs를 이동할 때 마다 다음과 같은 오류가 뜹니다. 오류 때문에 작동 되지 않는 것은 아니지만 나중에 혹여나 에러가 쌓이면서 문제가 될까봐 질문 드립니다. 구글링을 했을때는 저와 비슷한 상황인 분을 못찾아서 해결을 잘 못하겠습니다. 제 의견상으로는 제가 어디서 실수를 한것 같은데 해당 오류로는 자세히 찾지 못하겠습니다.. 

+) 현재 저는 mixins로 하지 않고 HOC로 사용하고 있고 ListView는 그때 당시 만든 컴포넌트입니다.

javascript vuejs

답변 1

0

캡틴판교

안녕하세요 찬민님, 질문을 자세하게 적어주셔서 감사합니다. 첨부해주신 에러 로그를 보면 아무래도 서버가 동작하고 있지 않을 때 페이지 이동하면 나는 에러 같은데요. 혹은 뷰 컴포넌트 파일 경로를 잘 설정하셨는지 확인해보셔야 할 것 같아요..! 특히 HOC를 사용하셨다고 한다면 HOC에서 컴포넌트를 삽입할 때 경로에 유의해보시면 좋을 것 같습니다..! :)

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

50

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

144

1

깃허브 권한 요청 드립니다

0

161

1

깃허브 권한 요청 드립니다

0

167

1

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

0

154

1

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

0

208

1

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

0

207

1

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

0

228

1

Vue3로 진행중입니다

1

338

1

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

1

506

1

vue3 에러 메세지...

1

670

2

id ="app" 중복

0

271

2

use undefined 에러가 나옵니다.

1

318

2

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

1

358

2

권한요청드립니다.

1

299

2

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

1

437

2

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

1

303

1

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

1

243

1

vuex 적용시 질문

1

288

2

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

1

385

2

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

1

455

2

권한요청 드립니다!

1

275

2