[Vuejs]-Vue router trying to use params as the name to match route

The issue you’re encountering is likely due to Vue Router trying to match a route by its name rather than its path.

You’re trying to navigate to /consumers/1, intending "1" to be a route parameter (:id). But Vue Router is interpreting "1" as a route name, hence the error message you’re seeing.

Ensure that you’re navigating using route paths, not route names. In your afterEach hook, use:

router.afterEach((to, from) => {
  router.push(to.path);
});

And when manually navigating, use the path (‘/consumers/1’), not the name. If you’re still having issues, it might be due to another part of your code.

Here’s how you might navigate to a route by its name:

router.push({ name: 'Consumer Details', params: { id: 1 } })

And, here’s how you might navigate to a route by its path:

router.push('/consumers/1')

Hope this helps!

Demo 

 <li v-for="article in articles" @click="getDescribe(article.id)">

scheme 1
      {
       path: '/describe/:id',
       name: 'Describe',
       component: Describe
      }

      getDescribe(id) {
        this.$router.push({
          path: `/describe/${id}`,
      })

    this.$route.params.id

scheme 2

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

   this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
   })

   this.$route.params.id


scheme 3
  
       this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
   
this.$route.query.id