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