혼새미로의 블로그

Router 객체에서 /test 라는 라우트 경로를 추가하고 name을 파라미터로 받는다고 가정할 때, router.js 파일에 다음과 같이 코드를 추가합니다. { path: '/test/:name', name: 'test', component: Test } 위 코드에 따르면, 사용자는 http://localhost/test로 접속할 수 있으며, 뒤에 name이라는 변수의 값을 파라미터로 전달할 수 있습니다. 위 라우트 경로의 이름은 test이며, 사용하는 컴포넌트는 Test입니다. 이제, 사용자가 위의 경로로 접속했을 때 파라미터를 받아서 사용하는 코드를 작성합니다. My name is {{name}} 위의 컴포넌트에서 보는 바와 같이, mounted() 콜백함수가 호출되었을 때, $route라는 변수..

웹 프론트엔드를 개발하는 도중에 스낵바 컴포넌트를 사용할 일이 생겼는데, 다양한 vue 파일에서도 사용할 것 같아서 vuex에 스낵바 표출 여부인 snackbar 변수와 스낵바 메시지 값인 snackbar_message 변수를 할당해서 보관하고, 필요할 때 마다 actions를 통해 값을 변경하면 스낵바가 나타나게 구현하기로 하였습니다. 처음에는 v-model="this.$store.getters.get_snackbar"와 vuex의 snackbar를 직접 지정해주었더니 5초 타이머가 지난 후에 스낵바가 없어지는 과정에서 해당 값을 변경할 수 없다는 오류가 출력되었습니다. 이에 따라, 지역 변수로 snackbar를 만든 후에 v-model="snackbar"로 지정하고 vuex의 snackbar 값이 변..