Description
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
- Define a route that has a beforeEnter guard (See below for my use case)
- 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.