Navi link list doesn't print path (vue)

Question

I have setup a router link list in Vue:

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_URL),
  linkActiveClass: 'activeView',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: indexView,
    },
    {
      path: '/weather',
      name: 'Weather',
      component: wetterView,
    },
    {
      path: '/sun',
      name: 'Sun',
      component: sonneView,
    }
  ]
})
export default router

Then I loop trough this:

<li v-for="value in $router.options.routes">
  <RouterLink :to="'/${value.path}'" class="tab typeM" :class="{ active: currentRoute === `/${value.path}` }">
    {{ value.name }}
  </RouterLink>
</li>

The loop is being generated but then I get:

[Vue Router warn]: No match found for location with path "/${value.path}"

What did I do wrong here?

Answer 1

Here is an updated version of the snippet provided. You should back ticks instead of quote.

<li v-for="value in $router.options.routes">
  <RouterLink
    :to="`${value.path}`"
    class="tab typeM"
    :class="{ active: currentRoute === `${value.path}` }"
  >
    {{ value.name }}
  </RouterLink>
</li>

The path already has "/" in its path name therefore, there is no need to include that.

Hope this helps.