Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Route push to same named route with different params will not execute beforeRoute guards #1012

Copy link
Copy link
Closed
@predhme

Description

@predhme
Issue body actions

NOTE: I cannot create a fiddler right now. I will update the ticket later, when I can, with a fiddler. However, I did link to the source that was the problem. I verified this in my browsers debug tools (chrome).

Vue.js / vue-router versions

2.0.7 / 2.0.2

Steps to reproduce

  1. Define a route that has a beforeEnter guard (See below for my use case)
  2. Call router.push() from that route to the same route but with different parameters (i.e. /requests/1 to /requests/2)

What is Expected?

The route transition is executed AND the beforeEnter guard is executed.

What is actually happening?

Essentially I have a route that is defined as such:

{
    path: '/request/:id',
    name: 'showRequest',
    component: ShowRequest,
    beforeEnter: (to, from, next) => {
        store.dispatch('fetchRequest', to.params.id)
        next()
    }
}

Inside my Vue I have a method that performs the following:

api.clone(this.request, function(response) {
     router.push({ name: 'showRequest', params: { id: response.id } })
})

The API call is returning a cloned object but with a unique ID. I wish to transition to the showRequest route but with the different parameter. What happens is that the route (url in my browser) is set, but the beforeEnter guard is not executed. Therefore, the URL is updated but the fetchRequest Vuex action is never called.

I ended up attaching a debugger to understand what is going on. The first thing I verified was that the isSameRoute was returning false (see isSameRoute). Since the paths are not equal (different ID at the end), this function returns false.

The next thing to happen is that the router is attempting to resolveQueue. This is where things break down. The two parameters passed in, this.current.matched and route.matched are equal. Therefore the activated and deactivated arrays are empty. Therefore the beforeEnter guard I have is never executed.

The problem is the comparison being done between the two routes . Slicing an array at its final index will undoubtedly return an empty array. This is precisely what is happening. Some sort of different comparison or override is needed.

sonnyboy27, lgalaz, jmaister, guAnsunyata, kelp404 and 7 more

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.