vue router 를 통해 별도의 데이터 전달하기

Vue 에서 전역으로 auth 체크하는 로직이 존재하는데 체크하는건 아래 메소드에서 진행하고 있다. 물론 다들 아시다시피 설명이 잘 되어있어서..ㅎㅎ;

router.beforeEach(async function(to, from, next) {
...

근데 페이지를 이동할때 next() 함수를 호출하는데 호출하면서 데이터를 어떻게 같이 보낼수있지? 찾아보다가 거의 한시간가량 삽질해본결과 전달할수있었다...ㅠ
예를들어서 회원정보 페이지를 보여줄때 대부분(나를 포함)은 created() 함수에서 axios등을 이용해서 데이터를 초기화할텐데 지금같은상황 그러니까 router.beforeEach 함수내에서 데이터를 초기화해야할때에는 next() 함수내에 객체를 보내야했다..가령 이런식으로 말이다

// 로직 처리후..
to.query.name = "powerMock";
next({ query: to.query }) // 잘된다.

여기서 to 는 매개변수 첫번째로 들어오는건데 이상하게 아래와 같이 할때는 제대로 변수가 전달되지않는다..사실 query 라고 쓰는것 자체가 이미 사용되고있는거고 다른 키값으로 넣고싶은데..라고 생각했어서 여러가지 실험?을 해봤는데 잘안되었다.. ㅠ

// 로직 처리후...
next({ query: { name: "powerMock" }}) // 안됨.

---

출처

1. vue-router guard for query param