Интеграция с Vue Router

Включите контекст маршрута, чтобы автоматически помечать каждую запись лога маршрутом Vue Router, активным в момент выполнения запроса. Это упрощает отслеживание, какая страница вызвала медленный запрос или ошибку, без ручного сопоставления по времени.

Vue 3 SPA

// main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import NetworkDashboard from 'vue-network-dashboard'
import App from './App.vue'

const router = createRouter({ history: createWebHistory(), routes })
const app = createApp(App)

app.use(router)
app.use(NetworkDashboard, {
  router,
  enrichWithRoute: true,
})

app.mount('#app')

Nuxt 3

// plugins/network-dashboard.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(NetworkDashboardPlugin, {
    router: nuxtApp.$router,
    enrichWithRoute: true,
  })
})

Что это добавляет

Когда настроено enrichWithRoute: true, каждый UnifiedLogEntry получает поле route:

entry.route // например "/dashboard/users/42"

В UI отладчика:

• В панели фильтров появляется поле фильтра Route (только когда хотя бы один лог несёт маршрут). Поддерживает префикс regex:.
• Вкладка Meta каждой развёрнутой записи лога показывает подсвеченный чип Route.
• Счётчики модального окна Export учитывают маршрут — фильтрация по маршруту уменьшает экспортируемый набор.

Функция не имеет runtime-зависимости от vue-router — плагин принимает любой объект, удовлетворяющий минимальному интерфейсу RouterInstance (currentRoute + afterEach).