CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
Diego
Diego

Reputation: 55

Vue $route.push not working when called from method

I'm building a search bar for my app with vue-bootstrap-typeahead autocomplete lib, if your not familiar with it, when you click a suggested result it triggers the @hit event, passing the result data to the method.

<vue-bootstrap-typeahead
    ...
    @hit="goToResult"
    ...
/>

Then I have the goToResult method

    methods: {
        goToResult(result) {
                this.$router.push({name: 'market', params: {marketId: result.id}});
        },
        ...
     }

When I do search from a non-market route it works fine, redirecting the user to the desired /market/:marketId route, but when it's done from a "market" route it just changes the URL but doesn't redirects to the new market, it even triggers the "duplicated route" error if I click the same result twice, but still not redirecting.

Any suggestion? Thanks

Upvotes: 0

Views: 533

Answers (1)

Flet
Flet

Reputation: 479

Check out the note at the bottom of the router.push section: https://router.vuejs.org/guide/essentials/navigation.html

Note: If the destination is the same as the current route and only params are changing (e.g. going from one profile to another /users/1 -> /users/2), you will have to use beforeRouteUpdate to react to changes (e.g. fetching the user information).

...and here is how to use beforeRouteUpdate: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

Hope this helps!

Upvotes: 2

Related Questions