CODEWITHSUNDEEP
vue.jsvue-routervue-router4
fahico98
fahico98

Reputation: 162

router-link-active class doesn’t work with different parameters values (Vue Router 4)

Hello everyone… I’m latin so my english is not very good looking.

I have this <router-link> component in my custom Navbar component.

<router-link :to="{ name: 'blog', params: { currentPage: 1 } }">Blog</router-link>

And this is my route definition:

{
   path: "/blog/:currentPage",
   name: "blog",
   component: () => import(/* webpackChunkName: "blog" */ "@/views/Blog.vue"),
   props(route){
      const props = { ...route.params }
      props.currentPage = parseInt(props.currentPage, 10)
      return props
   }
}

I have pagination component inside my Blog view.

<button
   v-for="page in numberOfPages"
   :key="page"
   @click="$router.push({ name: 'blog', params: { currentPage: page } })"
   :disabled="page == currentPage">
{{ page }}
</button>

I’m switching the page (ie the currentPage route parameter) from there but router-link-active class is only added to <router-link> with currentPage equal to 1 and none other, how can I keep active this <router-link> regardless the value of currentPage route parameter ? My pagination system must to be dynamic, I can't define a new child route for each page because don’t know how many pages will be.

This problem didn't exist in Vue Router 3 but I’m using Vue Router 4.0.3.

I tried to explaine my issue as well as I could.

Can anybody help me please…

Upvotes: 2

Views: 519

Answers (0)

Related Questions