Allow absolute path change without destroying rendered components (Twitter-style modals)

[LinusBorg]

Status Quo

In vue-router, the URL is the single source of truth. That means that no matter weither the user triggers a route from an external link, by typing out the URL himself or by clicking on a <router-link> inside our app, the same route if the URL is the same, then the same routes will be matched, and the same components will be rendered - no side-effects are taken into account.

I consider this to be a sensible, good approach. But there are situations where this behaviour is undesired:

The problem

If you go to Twitter's website, and open a tweet from any place (your own timeline, someone else's timeline, a list ...), three things happen:

1. A modal with the tweet opens
2. the URL changes to an absolute URL pointing to that tweet
3. Something doesn't change, though: the background of the modal. Even though we started from e.g. twitter.com/linus_borg and went to twitter.com/vuejs/status/xxxxx when we opened the modal, my profile's timeline is still in the brackground.

The user could simply copy & paste the tweets URL, post it somewhere, go back to twitter, close the modal and continue browsing my profile. Great!

Butr currently, this is not possible with vue-router. With vue-router, we would either have to

• render the modal as a child-route of my timeline, which means the URL would not point to the tweet really, but to /linus_borg_/status/vuejs/status/... or something.
• render the tweet route as an absolute path, but then the background view (my profile) would be destroyed.

Downsides

This breaks vue-routers philsophy of the URL as the only source of truth, because opening a tweet from timeline leads to a different view than opening the tweet's URL directly.

Proposed Solution(s)

Here this proposal becomes thin, and I didn't add the discussion label for nothing:

I don't really have an idea on how to approach this. I know that it's probably very hard to implement this in vue-router as it working different to the whole route-matching pattern etc, so I'm open to ideas.

Maybe, we could at least implement a way to "pause" the router's URL change callback? So the user can "deactivate" the router momentarily, change the URL himself, show the modal, and on closing the modal, reactivate the router?

Or maybe this could be accomplished with named router views, if we allow route that only point to a named view , so the "normal components, e.g. the profile, stay rendered, and we show the overlay in a named view? (tested this, doesn't work right now).

Anyways, I think this wold be a great feature for many scenarios (Spotify's uses this for its ovelays showing album / playlist / artist views anywhere, for example)

So, what do you guys think? Any opinions? Ideas for solutions?

[posva]

I think this can be done with history.pushState:

1. You can pushState to replace the url when the modal shows up: history.pushState({}, null, '/tweet/3')
2. Then do back to dismiss it: history.back()
3. If you leave the route, you can also call history.back() to pop that state

I tried on a project and works like a charm. It's quite manual, so we may consider leveraging that.

Edit: This went through an RFC for v4 and is merged and supported through the route prop on <router-view>. There is an e2e test on vue-router next repo for modals

[fnlctrl]

I think this is already possible with 2.0 because child routes can have a root path. ;)
It's not quite a noticeable change, so you probably have missed that:
https://github.com/vuejs/vue-router/blob/dev/examples/nested-routes/app.js#L39-L43

To achieve your example:

{ 
  // /linus_borg
  path: '/:userId', component: Parent,
    children: [
      // NOTE absolute path here!
      // this allows you to leverage the component nesting without being
      // limited to the nested URL.
      // components rendered at /baz: Root -> Parent -> Baz
      // /vuejs/status/xxxxx
      { path: '/:organization/status/:xxxxx', component: Baz }
   ]
}

[LinusBorg]

@posva ...but pushstate will trigger a popstate event which will be picked up by the router... Which will re-route, which we don't want.

[LinusBorg]

@fnlctrl but this would to duplicate paths in the pathMap if I wanted that path as a root route and as a child route in multiple places...

[fnlctrl]

@LinusBorg
I think duplicating paths in config is unavoidable if you need it('/vuejs/status/xxxxx') to be child route in multiple places.. as for the root route, there's only one to be defined, so no duplications.

Aside from that, I guess we can also try aliases?
http://router.vuejs.org/en/essentials/redirect-and-alias.html

[{ 
  // /linus_borg
  path: '/:userId', component: Parent,
    children: [
      { path: ':organization/status/:xxxxx', 
        component: Baz,
       // /vuejs/status/xxxxx
        alias: '/:organization/status/:xxxxx' }
   ],
}, {
   path: '/foo/bar', component: Parent,
    children: [
      { path: ':organization/status/:xxxxx', 
        component: Baz,
       // /vuejs/status/xxxxx again
        alias: '/:organization/status/:xxxxx' }
    ]
}, {
   path: '/:organization/status/:xxxxx', component: Baz
}]

[LinusBorg]

Duplicates in the pathMap are not possible, the last one would override the previous one... So only one, the last one, would ever be recognizable.

[fnlctrl]

I see... but in that case where you want the path as a child route in multiple places, it would be mapping /:organization/status/:xxxxx to multiple components...so what /:organization/status/:xxxxx shows will depend on app state.

I think what we really need is a url rewrite feature like the backend servers have. It would be like an alias without being registered into pathMap.

i.e.
User is on /linus_borg,
navigates to /linus_borg/vuejs/status/:xxxxx
url rewrites to /vuejs/status/:xxxxx, but no actual navigation is made.

From this point on:
When the user refreshes the page, it shows the root record that /vuejs/status/:xxxxx really maps to.
When the user clicks another link, everything goes on normally.

[LinusBorg]

Yes, that's describes pretty much what I had in mind, thanks :)

[simplesmiler]

I think going from /u/alice to /u/bob/s/something will reuse the user view component, so how about "freezing" updates on it? I recall Evan talking about ability to bypass reactive updates.

[nicolas-t]

I'm facing the exact same issue.
With backbone router you have a trigger option.
It allows you to update the url without making any route matching / rerender
http://backbonejs.org/#Router-navigate

that behaviour with router.push or router.replace would be awesome :)

[nicolas-t]

any update on this topic ?

[LinusBorg]

I 'm on this, but haven't found the time to finish it with tests and all.

Actually it's quite easy: You could, today, use the history API directly to change the URL with pushstate() or replaceState() and revert it back after e.g. the popup closes.

Since the "popstate" event will only be called by actually clicking on the browser buttons, this can be achieved without interfering with vue-router.

I'm working on providing a convenience function for this, but since I'll be on vacation until Nov. 2nd, this may take a while.