vue router (2) 썸네일형 리스트형 [ Vue ] 컴포넌트 내에서 라우터 변경 감지하기 문제 화면이 바뀌면 메뉴창이 닫히는 부분 구현 중, 모바일 메뉴는 누르면 화면을 차지하면서 뜨는 메뉴였는데 path자체가 바뀌는 경우는 재렌더 되면서 메뉴가 닫혔으나 query만 바뀌는 경우에는 렌더가 일어나지 않아서 메뉴가 닫히지 않아 이러면 일일히 닫아주는 함수를 작성해야 하나 싶었다. this.$route를 console에 찍어 본 결과는 위와 같았다 해결 결론적으로 route가 변경되는 순간을 감지해서 메뉴창을 닫아주기로 했다. 그리고 모바일에서만 일어나면 되는 일이므로 괜히 pc에서 리소스 낭비가 될까봐 width값을 조건으로 걸어주었다 export default { watch:{ $route(){ const width = window.innerWidth if (width [ Vue ] Vue Router 사용하기 ( + query , params ) Vue Router 라우팅이란 웹 페이지의 간의 이동방법을 의미. Vue Router는 1) URL에 따라 보여줄 컴포넌트를 연결해 놓고, 2) 해당 URL로 이동했을때 연결된 컴포넌트를 보여준다. Router 설치 npm i vue-router --save routes 파일 생성 설치 후 routes.js 파일을 만들고, 사용할 컴포넌트들과 vue, vuerouter 등을 import 해준뒤 ulr과 컴포넌트들을 연결해준다. import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../views/Main.vue' // route에 등록할 컴포넌트들 등록 Vue.use(VueRouter) export const router =.. 이전 1 다음
