vue.js 라우터 파라미터 값 읽기 null 에러

router-link to="/xxxx/detail"로 작성후, 

받는 컴포넌트에서 this.$router.params.detail로 읽으니 계속 읽히지가 않았다.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'detail')

router.js도 제대로 셋팅을 했는데 왜 안되나 하다가 블로그글을 읽고 나서 this.$route.params.detail로 읽으니 잘 읽히더라.

그래서 chat gpt에게 차이가 뭔지 물어봤다.

 

Q: what is different this.$router.params.~~ and this.$route.params?

A:

1. this.$route.params: This is the correct way to access the route parameters in Vue Router. It provides access to the dynamic route parameters defined in your route configuration. For example, if you have a route like /user/:id, you can access the id parameter using this.$route.params.id. (즉, 내가 원래 사용하려던 의도의 파라미터 값을 읽을 때 사용됨)
2. this.$router: The $router object is used for programmatic navigation and controlling the router instance. It provides methods like push, replace, and go, which allow you to navigate to different routes in your application programmatically. It does not directly provide access to route parameters like params. ($router는 라우터 객체 자체를 이용하는 용도라고 보면될듯. 내비게이션(뒤로가기, 바로가기 등)의 용도로 많이 쓰인다.)