VueRouter의 Dynamic Routing 파헤치기

Adding routes

동적 라우팅 에서는 주로 두가지의 메서드로 인해 동작하게 됩니다.

• router.addRoute()
• router.removeRoute()

새 경로만 등록하기 때문에, 페이지 이동시에는 router.push() 또는 router.replace()메서드를 사용해야 합니다.

const router = coreateRouter({
    history: createWebHistory(),
    routes: [{ path: '/:articleName', component: Article}],
})

 

위와 같은 경우 /about, /store, /3-twinkle 등 모든 라우트가 Article 컴포넌트를 렌더링 할 것입니다. 이제 새로운 /about이란 라우트를 추가해 보겠습니다.

router.addRoute({ path: '/about', component: About })

 

추가 했지만 여전히 Article을 렌더링하고 있을 겁니다.

 

이럴 경우 우리는 router.replace()를 사용해 해당 화면을 대체할 수 있는 것이죠.

router.addRoute({ path: '/about', component: About })
// this.$route or useRoute()를 사용할수도 있습니다.
router.replace(router.currentRoute.value.fullPath)

 

새로 등록한 라우트가 표시 될때까지 기다린 후 작업을 해야한다면 우리는 await을 사용할 수 있습니다. 다음과 같이 말이죠.

await router.replace(router.currentRoute.value.fullPath)

네비게이션 가드에서 라우트 더하기

만약 router.addRoute()를 Navigation Guard에서 사용한다면, return을 잘해야합니다.
무한루프를 방지한 return flase문도 유의해야하는 사항이죠

router.beforeEach(to => {
    if (!hasNecessaryRoute(to)) {
        router.addRoute(generateRoute(to))
        // 리다이렉션을 트리거
        return to.fullPath
    }
})

Removing routes

라우트를 더할 수 있다면 라우트를 제거할 수도 있어야 겠죠??

 

이번에는 제거하는 방법을 알아 보겠습니다.

 

첫 번째 방법은 라우트를 덮어씌우는 방법입니다. 갈아 치우는 방식으로 제거하는 것이죠.
이 방법은 name속성을 기준으로 발생합니다. 동일한 name을 가진 라우트를 찾아 덮어 씌우게 됩니다.

router.addRoute({ path: '/about', name: 'about', component: About })
// 위와 같은 라우트가 이미 존재한다고 했을경우 아래와 같이 변경 시킬 수 있습니다.
router.addRoute({ path: '/other', name: 'about', component: Other })

 

두 번째 방법은 removeRoute() 메서드를 이용한 방법입니다.

 

이 방법은 라우트의 name속성을 이용해서 제거하는 방법입니다.
인자로 받는 값이 라우트의 name속성을 바라보기 때문입니다. 그럼 한번 볼까요??

router.addRoute({ path: '/about', name: 'about', component: About })
router.removeRoute('about')

Adding Nested Routes

라우트를 구성하면서 우리는 중첩된 라우트를 경험적이 있죠??
당연히 이 기능도 구현이 가능해야 할겁니다.

addRoute()의 두개의 인자를 넣으면 가능하게 되는데요.

 

첫 번째 인자로는 부모 라우트를 찾게 합니다. name속성과 일치하는 녀석을 찾는거죠.
두 번째 인자로는 추가할 라우트 객체를 작성하는 겁니다.

 

예를 들어보겠습니다.

router.addRoute({ path: '/admin', name: 'admin', component: About })
router.addRoute('admin', { path: 'setting', component: About })

 

위의 코드와 아래의 코드는 같은 기능을 하게 됩니다.

router.addRoute){
    path: '/admin',
    name: 'admin',
    component: About,
    children: [
        {
            path: 'settings',
            component: AdminSettings,
        },
    ],
}

router.hasRoute()

name속성을 사용하고 해당 라우트가 존재하는지 체크합니다.

router.getRoutes()

모든 라우트를 배열의 형태로 가져옵니다.