Routing

Sometimes, there is a need to implement navigation in an application using a dropdown list. Let's explore how to achieve this.

As an example, let's consider navigation that includes not only useful pages but also technical pages, such as a 404 error page.

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

Based on this list, we can compute the options for the component:

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),
    )
})

The current route will be stored in a constant, and when it changes, the route will be updated:

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

Now, let's configure the component by specifying the property containing the option label and disabling clearing:

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