$router에 params 함께 전달하기

$router.push() 를 사용하여 페이지를 이동, params 데이터를 함께 전달하자!

 

 

---

 

 

특정 버튼 클릭 시, 특정 페이지로 이동하는 로직을 적용하는 도중,

해당 페이지에 탭이 생겨버렸고...

 

 

 

 

 

 

1번 버튼 클릭 -> A 페이지 A-1 탭으로 이동
2번 버튼 클릭 -> A 페이지 A-2 탭으로 이동

 

을 적용하기 위해,

현재 적용한 로직 $router.push에 params로 type값(A-1, A-2)을 넣어주기로 했다.

 

 

 

switch (key) {
	case '1번': {
    	this.$router.push({
        	path: '/page/A',
            params: { type: 'A' }
        })
        break;
    }
    case '2번': {
    	this.$router.push({
        	path: '/page/A',
            params: { type: 'B' }
        })
    	break;
    }
}

 

 

처음에 아무생각 없이 이렇게 수정했더니 안됨.

 

그래서 검색을 했더니,

params를 함께 전달하기 위해서는 path로 넘기면 안되고 name으로 넘겨야 된다고 함!!!

 

 

 

switch (key) {
	case '1번': {
    	this.$router.push({
        	name: 'GoodPage',
            params: { type: 'A' }
        })
        break;
    }
    case '2번': {
    	this.$router.push({
        	name: 'GoodPage',
            params: { type: 'B' }
        })
    	break;
    }
}

 

 

그래서 또 name으로 수정함.

근데 또 안됨. ㅋㅋ

 

바보가..

router에 name을 정의해주지 않았는데 $router가 어떻게 알고 name을 찾아갈까!

 

 

 

// router.js

const router = [
	...
    {
    	name: 'GoodPage',
        path: '/page/A',
        component: () => import('...')
    }
]

 

 

 

이렇게 router 수정해주고 실행하니까

params 아주 잘 들어감!!