Как сделать бесконечный рекурсивный роутер из vuerouter?

Для создания бесконечного рекурсивного роутера с использованием Vue Router вам понадобятся следующие шаги:

1. Добавьте Vue Router в свой проект. Установите пакет с помощью NPM или Yarn, и импортируйте его в своем приложении:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. Создайте компонент, который будет использоваться для отображения рекурсивных роутов. Назовите его, например, RecursiveRoute.vue:

<template>
  <div>
    <h2>{{ $route.params.id }}</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'RecursiveRoute',
}
</script>

3. Определите рекурсивный путь в вашем маршрутизаторе router.js. В этом пути будет использоваться созданный вами компонент RecursiveRoute:

const routes = [
  {
    path: '/recursive/:id',
    name: 'Recursive',
    component: RecursiveRoute,
  },
]

const router = new VueRouter({
  routes,
})

export default router

4. Теперь вам нужно добавить ссылки на рекурсивные роуты. Создайте компонент, например, RecursiveLinks.vue, который будет отображать список ссылок на рекурсивные роуты:

<template>
  <ul>
    <li v-for="id in ids" :key="id">
      <router-link :to="`/recursive/${id}`">{{ id }}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'RecursiveLinks',
  data() {
    return {
      ids: [1, 2, 3], // пример данных для ссылок
    }
  },
}
</script>

5. Используйте компонент RecursiveLinks в вашем приложении, чтобы отобразить ссылки на рекурсивные роуты. Например, добавьте его в основной компонент App.vue:

<template>
  <div id="app">
    <h1>Бесконечный рекурсивный роутер</h1>
    <router-view></router-view>
    <RecursiveLinks></RecursiveLinks>
  </div>
</template>

<script>
import RecursiveLinks from './components/RecursiveLinks'

export default {
  name: 'App',
  components: {
    RecursiveLinks,
  },
}
</script>

Теперь приложение будет показывать рекурсивные роуты, где каждый новый уровень будет отображаться внутри родительского компонента, имеющего маршрут /recursive/:id.

Каждая ссылка в компоненте RecursiveLinks на рекурсивный роут будет содержать параметр :id, который будет использоваться в компоненте RecursiveRoute для отображения соответствующих данных.

Вы можете модифицировать этот пример, чтобы он соответствовал вашим требованиям. Например, вы можете получать данные для ссылок с сервера, использовать динамические параметры в URL и дополнять компоненты с рекурсивной структурой другими компонентами.