[Vuejs]-Vue-router keeps appending # to existing routes. P.S this isn't the typical hash, history mode issue

by

0👍

I was also facing the similar issue.

For me the issue was that I was redirecting to new page using router.push() on click of a div.

And I was using @click.stop = "myFunction" . This was adding a # in the url and not redirecting the user.

I tried different variation of this as well. I tried using event object as well like event.stopPropagation(). With this as well got same result.

When I used @click.prevent, this everything worked as expected.

PS:

You can use catch block to trace the error as well.

this.$router..push({
        name: "PAthName",
        params: { id },
        query: { id }
      })
      .catch(e => {
        console.log("Errors", e);
      });

0👍

Should have updated this earlier.

The fix was relatively simple, all i did was change the binding from

<router-link class="w-full" :to="men.url"> {{men.name}} </router-link>

to

<router-link class="w-full" :to="`/${men.url}`"> {{men.name}} </router-link>

and voila!

Leave a comment