Skip to content

In the afterEach hook, the query of loaction.href != to.fullPath #1197

@w2819

Description

@w2819

"vue": "^2.1.0",
"vue-router": "^2.0.1",
https://jsfiddle.net/warden__/t59wecc5/

In the 1.x it works well

Activity

posva

posva commented on Feb 24, 2017

@posva
Member

@yyx990803 Was this on purpose? I can submit the fix by moving the hooks call out of updateRoute, just after the ensureURL call

sojuker

sojuker commented on Sep 8, 2017

@sojuker

Is there a reaction to this?
Half a year passed, and nothing happened, does anyone work on it?

My situation:
I want to collect the right URL to report,
and I want to collect this information when route changing
at global level guards instead of component's level route guards
so the collecting and reporting action corresponds to session history changing.

posva

posva commented on Sep 8, 2017

@posva
Member

I forgot about this but it's not a problem at the moment because you can get the fullPath anyways in the afterEach callback:

router.afterEach((to, from) => {
  console.log('from', from.fullPath)
  console.log('to', to.fullPath)
  console.log('location.href' + location.host + to.fullPath) // instead of location.href
})  

I suppose changing the location is not done yet in case you want to redirect or replace the location in the after hook, so preventing chaning the url for nothing

sojuker

sojuker commented on Sep 14, 2017

@sojuker

I read the vue-router's documents again, and according to it, global afterEach hooks are called after navigation confirmed, and all things should be settled after navigation confirmed stage. So even if developer wants to redirect / replace the location in the after hook, it is completely another navigation as far as I'm concerned, not the reason pending the location updating.

Second, as I can learn from the docs, global beforeEach callbacks are repected as guards(so its callback has a third parameter next which is used for resolving the hook) , but global afterEach callbacks only act as hooks. Developer can redirect the navigation in the before hook througth next('/'), but I can not find a way to redirect the navigation in the after hook without calling replace/push/go API, certainly calling replace/push/go means another navigation(or history traversal).

What I means is that in navigation confirmed stage vue-router should update the location, and any router manipulation in after hook should be honored as another navigation(or history traversal).

doc link: https://router.vuejs.org/en/advanced/navigation-guards.html

image

mcdongWang

mcdongWang commented on Mar 20, 2018

@mcdongWang

first, i know that i can get the right href from the location.host and to.fullPath
but i want to know why on the afterEach hook(after Navigation confirmed) location.href has not been changed yet

image

mcdongWang

mcdongWang commented on Mar 20, 2018

@mcdongWang

and another thing,
location.href => location.origin + to.fullPath is batter than location.host

location.href = protocol + host + path

hecktarzuli

hecktarzuli commented on Mar 5, 2019

@hecktarzuli

I don't understand why this was closed @posva What are we supposed to listen to to know the url is settled? The TO object is useless to third parties like Google Analytics, BoldChat, Drift etc.. They look at window.location and at this point (afterEach) the url has NOT changed.

posva

posva commented on Mar 5, 2019

@posva
Member

Of course you don't, you haven't yet checked #2292 and/or #2079 😉
It's something I will look at in the following weeks once I have time to do more open source again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @posva@hecktarzuli@sojuker@mcdongWang@w2819

        Issue actions

          In the afterEach hook, the query of loaction.href != to.fullPath · Issue #1197 · vuejs/vue-router