Навигация

Иногда есть необходимость навигацию в приложении реализовать при помощи выпадающего списка. Давайте разберем как это сделать.

Для примера возьмем навигацию в которой, кроме полезных страниц, есть и технические на подобии страницы ошибки 404.

const routes = [
  { path: "/", component: Home, name: "Home" },
  { path: "/about", component: About, name: "About" },
  { path: "/:pathMatch(.*)*", component: NotFound, name: "404" }
];

На основе этих этого списка можно вычислить список опций для компонента

const router = useRouter()
const links = computed(() => {
    const excludes = ['404']
    return router.options.routes.filter(
        (r) =>
            r.path.startsWith('/') &&
            typeof r.name === 'string' &&
            !excludes.includes(r.name),
    )
})

Текущий маршрут будет храниться в константе, и при ее изменении будем менять маршрут

const current = ref(
    router.options.routes.find(
        item => item.path === router.currentRoute.value.path,
    ),
)
watch(current, router.push)

Остается настроить компонент: указать свойство содержащее метку опции и запретить очистку

<template>
  <v-select
      :clearable="false"
      :options="links"
      label="name"
      v-model="current"
  />
</template>