Как достичь n уровней вложенных динамических маршрутов в Vue.js?

Question

Я хочу достичь n уровней динамических вложенных маршрутов в Vue.js, где n мне неизвестно. например -

abc.com/ctx-path/component/1/2/...../n

где 1,2, ... n - уровни

Как мне добиться этого с помощью Vue-router?

Answer 1

За кулисами сопоставления путей vue-router используется path-to-regexp . Так что должно быть возможно написать что-то вроде этого

{ path: '/ctx-path/component/:id+', component: Component }

или

{ path: '/ctx-path/component/:id*', component: Component }

Вы также можете добавить путь динамически в во время выполнения , но для его добавления потребуется триггер.

Последний вариант - перехватить весь маршрут и добавить собственную логику.

Answer 2

Это из документов:

const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User,
            children: [
                {
                // UserProfile will be rendered inside User's <router-view>
                // when /user/:id/profile is matched
                path: 'profile',
                component: UserProfile
                },
                {
                // UserPosts will be rendered inside User's <router-view>
                // when /user/:id/posts is matched
                path: 'posts',
                component: UserPosts
                }
            ]
       }
   ]
})

см. Ссылку https://router.vuejs.org/guide/essentials/nested-routes.html