CODEWITHSUNDEEP
vue.jsurlvuejs2vue-componentvue-router
user10031694
user10031694

Reputation: 221

How to change current route in vue-router

Here is my route; http://localhost:3000/homes/California/buy/, and I'm trying to use vue-router to change the route to http://localhost:3000/homes/California/rent/. I have tried doing this;

<router-link
        :to="{ path: `homes/${this.$route.params.search}/rent/` }"
        tag="p"
      >
        Rent
</router-link>

But it appends the path to the previous path. So I get http://localhost:3000/homes/California/buy/homes/California/rent/.

I even thought it's maybe the this.$route.params.search, so I replaced the path to; homes/Chicago/buy/, it still didn't work. How do I solve this?

Upvotes: 0

Views: 2481

Answers (2)

Asim Khan
Asim Khan

Reputation: 2039

you need to add a / before homes to make it an absolute path. please try with the below code.

<router-link
    :to="{ path: `/homes/${this.$route.params.search}/rent/` }"
    tag="p"
  >
    Rent
</router-link>

Upvotes: 0

Luke Carr
Luke Carr

Reputation: 571

The path you've supplied to the <router-link> is a relative path. You need to prefix the path with a / so that it is relative to the root of the website, rather than the current page:

<router-link
        :to="{ path: `/homes/${this.$route.params.search}/rent/` }"
        tag="p"
      >
        Rent
</router-link>

Upvotes: 3

Related Questions