Front/Vue.js3 [Vue.js] Vue Router 와 Route 차이 Vue 프로젝트를 진행하고 있는 중 페이지를 이동할때 this.$router.push() 를 하거나 url 정보가 필요할때 this.$route.path 를 사용했다. router와 route가 어떤 차이가 있는지 궁금하여 포스팅을 작성하게 되었다. $router - Router 인스턴스 : 웹 어플리케이션에서 하나만 존재 - 전반적인 라우터 기능을 관리 -> 없이 push() 함수를 이용하여 이동 가능 프로퍼티/메서드 설명 app 라우터를 사용하는 Root Vue 인스턴스 mode 라우터 모드 currentRoute 현재 라우트에 대한 Route 객체 push(location) 페이지 이동 실행 (히스토리에 새 엔트리 추가) replace(location) 페이지 이동 실행 (히스토리에 새 엔트리 추가.. 2022. 8. 2. [Vue.js] NavigationDuplicated: Avoided redundant navigation to current location: "/profile" 오류 해결방법 * 프로젝트 진행 중 발생한 오류 해결법을 정리한 글입니다. 프로젝트 진행 중 하단 네비바 버튼을 클릭하면 $router의 push 메서드를 이용하여 페이지를 이동하기 위해 아래와 같은 코드를 작성했다. changeRouter(pageName){ this.$router.push({name: pageName}) } 문제 없이 이동이 잘되어 끝난 줄 알았지만, 같은 메뉴를 여러번 클릭하면 아래 사진과 같은 오류가 발생했다. 문제가 발생한 원인은 같은 라우터로 이동을 시도해서 발생한 오류였다. 라우터 이동을 시키는 함수를 아래와 같이 변경하여 해결하였다. changeRouter(pageName) { if (this.$route.path != "/" + pageName) { this.$router.push({ .. 2022. 8. 2. [Vue.js] vue.js 바인딩이 안되는 경우 (반응형 알아보기) 회원 가입 시, 랜덤으로 서버에서 데이터를 가져와 화면의 input 요소들에 보여주는 코드를 작성했다. user 객체는 생성되며, 등록도 잘 되었지만 화면에 값들이 보여지지 않는 오류가 발생했다. import ai from "../http/axios.js"; export default { template: ` 회원 가입 아이디 비밀번호 이름 이메일 나이 등록 랜덤 `, data() { return { user: { }, }; }, methods: { async random() { const response = await axios.get("https://random-data-api.com/api/users/random_user"); this.user.id = response.data.id; this.us.. 2022. 5. 12. 이전 1 다음
