Vue-router: Vue-Router breaks when reloading page

[Juli0GT]

Version

2.7.0

Reproduction link

https://codepen.io/Juli0GT/pen/veEEpr

Steps to reproduce

Before reloading page thats my $route component:

$route:Object
fullPath:"/dashboard/customer-service?subnav=dashboard&activeClass=active"
meta:Object (empty)
name:“csDashboard"
params:Object (empty)
path:”/dashboard/customer-service"
query:Object

What is expected?

Having same $route component after reload

What is actually happening?

If I refresh the page my router doesn’t recognise anymore my route, and my $route object looks like this:

$route:Object
fullPath:"/“
meta:Object (empty)
params:Object (empty)
path:”/"
query:Object (empty)

[morficus]

when you reload the page and lose your router object... what is the URL in your browser?
is it still /dashboard/customer-service or is it just your base domain?

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.

[davidsielert]

I think this really is an issue, I've just encountered this as-well reloading a page from within a route redirects to the root path after page load.

[posva]

If it's an issue, please provide a boiled down repro

[MatteoGabriele]

@posva I actually have the same error and has been reported as a bug to my plugin vue-analytics.

What I do is grabbing the route and automatically start tracking pages with Google Analytics, but when a component has been lazy loaded there's a moment when the currentRoute object has empty properties: like the one described in this ticket.

If you need some sort of reproduction you could check the one done in the issue reported to me (https://github.com/MatteoGabriele/vue-analytics/issues/149). The issue in vue-analytics is that I need a name property in the currentRoute when tracking, but the root route sometimes doesn't have it.

Let me know if it's all clear otherwise I'll try myself to create a better reproduction for here.

Thanks for your time

[posva]

Yeah, I would need a repro I can play with (jsfiddle, codesandbox) without vue-analytics. Thanks 🙂

[MatteoGabriele]

@posva I've crated a codesanbox for you https://codesandbox.io/s/742n0wow51

in the router.js file there are two kinds of imports: one with lazy loading and a normal one.

The one with lazy loading will render in the html an "empty" route object with no name etc..

the second one will render a route object with a name property as is expected.

Thanks a lot for your time and I hope will be enough otherwise I'll try something else

[posva]

@MatteoGabriele I think you shared the wrong codesandbox

[MatteoGabriele]

@posva Did I?

[posva]

it renders the route before navigation. keep in mind $route is not serializable and therefore cannot be displayed inside HTML as well

[MatteoGabriele]

but well the point tho is that for a "second" the $route object is empty, compared to the not lazy loaded and it is visible in this example.

I hoped that the concept was clear but I can think about something else even tho the main point is that the route on lazy loading has null values on the start and it breaks code that reads those values.

[NoraGithub]

@posva would you please answer the question of @MatteoGabriele ?

[posva]

mmh, but the route is empty while we wait for the component because navigation is completed once the component is fetched, and that's also when the $route object is updated
what question?

[helariL]

I had the same issue. On hard reload $route is empty on initial mount but being updated later on. Quick workaround was to set $route as a computed property and just watch the computed property change and based on that update necessary data in my component.

[Naveen95]

you can do this. Add this line to the route file

Route::get('/{vue_capture?}', function () { return view('welcome'); })->where('vue_capture', '[\/\w.-]*');

[chaijinsong]

I think this really is an issue, I've just encountered this as-well reloading a page from within a route redirects to the root path after page load.

Is this problem solved? How did it work out? please

[Sakthi002]

i am facing the same problem.... how to resolve this.. help me

[Sakthi002]

https://drive.google.com/file/d/1sft5EsESSWJxG-PGhKhDeazY1V9PpMXU/view

[sohailkhann05]

I am facing same issue did you solve?

[ghost]

Is there an update to this issue? I am facing the same problem.

[StrangeWill]

Same problem here, seems to be some sort of race condition, I can hit the same link and like 20% of the time this.$route.name returns null, which obviously causes some issues when the app is supposed to preserve the route under some conditions for specific routes.

[theorange7]

I have a similar case happening. Posted here with some code https://stackoverflow.com/questions/56382623/vue-router-does-not-stay-on-same-page-after-a-page-refresh?noredirect=1#comment99367061_56382623

I have a /user/:uid route that shows a list of itinerary for a given user. Using router-link I'll route users to the detailed itinerary view which is on route /itinerary/:itnerary_id. Once I'm there, if I do a page refresh/f5/reload, I'll get routed back to the /user/:uid (browser address bar shows this). Checking vue-devtools, the router section does not show a "navigation" but shows /user/:uid.

[ankush981]

@theorange7 Same problem here! Been struggling with it for a long time!

[mpbarlow]

I'm also running into the same issue. If I try to query anything about the current route during a created/mounted hook, I get empty route objects if the component specified in the route is dynamically imported. This happens regardless of which descendent component I attempt to access this.$router from (i.e. it can be five levels of statically imported components down from the dynamically imported page component, and will still happen).

If I use a statically imported component for the page, the issue goes away. If I wait for an arbitrary amount of time (500-1000ms) with something like setTimeout, it (mostly) goes away. Neither of these is a particularly workable solution though.

[rognstad]

I'm experiencing this as well on routes with lazy-loaded components. It seems likes since all the routes and their paths are defined ahead of time, it ought to be possible for $route.name to resolve to the correct route immediately.

I was able to use this to work around the problem in my app:

watch: {
  $route(to, from) {
    if (to.name && from.name === null) {
      // do stuff
    }
  }
}

[lokielse]

After adding a name prop to route, It works for me.

 {path: '/store', component: Store, meta: {title: 'Store'}},
 {path: '/store', name: 'store', component: Store, meta: {title: 'Store'}},

P.S. I use vue-navigation with vue-router together

[mpbarlow]

Not sure if this will solve other people's issues but I just wrapped the code that was checking the current route in a call to this.$router.onReady().

So, for example something like:

export default {
  ...,
  created () {
    this.$router.onReady(() => {
      if (this.$route.name === 'whatever') {
        this.doAThing()
      }
    }
  }
}

This will give a chance for async components to resolve and everything to get in order...I probably should have read the documentation more closely as it's all quite clearly explained 😅

[xxRockOnxx]

didn't know vue-router has a hook, that's awesome!
onReady seems to be the best place to do things that relies on route/url stuff. thanks @mpbarlow for mentioning it

[OtabekSadiridinov]

Doesn't it worked yet? When we'll be able to get id even page is refreshed?