질문있습니다!

Question

두가지 질문있습니다 1. 현재 페이지가 a/b/3이고 a/b/5 페이지로 이동하고싶을 때, 즉 같은 컴포넌트 내에서 params 값만 바꾸어서 페이지를 변경하고 싶을땐 어떻게 해야되나요?? 해당 페이지에서 this.$router.push나 replace로 params만 변경했더니 navigation duplicated 에러가 발생하거나 console에 특정 변수들을 찍어보면 이전 페이지에 대한 데이터 역시 같이 찍히게 됩니다.      mounted  () {      document . addEventListener ( 'keypress' , ( e )  =>  {  if  ( e . keyCode  ===  97 ) {  this .console(); } }); } (위와 같이 a버튼을 눌럿을 때, 콘솔에 찍히게 만들었는데 이때 이전 페이지에 있던 내용 역시 같이 찍히게 됩니다.) 사용한 함수는 아래입니다. (_randomKey가 있든 없든 제대로 동작하지 않습니다..) nexts  () {        return   this . $router . replace ({  name:   'Components' ,  params:  {  id:   this . next  },  _randomKey:   Date . now () }). catch ( err   =>   console . log ( err ));    } vue-route 공식문서에는 같은 컴포넌트 내에서 params만 바뀔땐 beforeRouteUpdate를 사용하라는 것을 보았는데, 단순하게       beforeRouteUpdate  ( to ,  from ,  next ) {        console . log ( to );        console . log ( from );    } 위처럼만 해도 console에 찍히지가 않아서 이걸 쓰는게 맞는건지 잘 모르겠습니다.. 어떤 방법으로 해결해야 될까요?? 2. 어떤 태그 하나에 대해서 클릭과 키 프레스 이벤트를 동시에 실행하고 싶은데  <v-btn @click="a" @keypress.enter="b">  로 했더니 keypress에 대한 이벤트가 동작하지 않습니다. 이럴땐 document.addEventListener를 이용하는 방법밖엔 없는건가요??

캡틴판교 · Answer

안녕하세요  ㅁㄴㅇㄼㅈㄷㄱ 님, 답변이 늦어져서 죄송합니다 :) 1. 페이지 URL 정보가 바뀌면 라우터의 네비게이션 가드 또는 컴포넌트 내의 watch: { $route() {} }  코드를 이용하여 변화를 감지한 후 로직을 실행하실 수 있을 겁니다. keypress 이벤트가 남아 있는 부분은 페이지를 이동하기 전에 이벤트 리스너를 제대로 제거 했는지 한번 확인해 주시면 좋을 것 같아요. 2. 뷰 디렉티브를 이용한 이벤트 제어는 아래와 같이 여러개도 가능합니다. <input @click @keypress @mousever ...> 다만, 위의 예시로 든 버튼 요소에는 Vue.js를 떠나서 기본적으로 키보드 이벤트를 제어하지 못할 것 같습니다. 브라우저 입장에서는 인풋 요소에만 키보드 이벤트를 받을 수 있게끔 설계된 것으로 알고 있으니 HTML 요소 별로 어떤 이벤트를 사용할 수 있는지 먼저 확인해 보시면 좋을 것 같습니다 :) 수강해 주셔서 감사합니다