vue.jsvue-router

Navi link list doesn't print path (vue)


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?


Solution

  • 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.