4

I'm building an app with vue-router and trying to achieve a UI similar to that of (the now defunct) Google Inbox. Or the Techcrunch homepage, which is possibly a better rendition of what I need.

  • there's a list of items
  • when you click on one of those items, it "expands in place" to display more details.
  • the URL also updates to reflect the expanded item
  • when clicking "back" the item collapses back into the list
  • when accessing the URL directly, the page should display the expanded item, and (optionally) could display more list items below.

Thing is, I can't figure out how I would build this - I'm trying to start from the idea of child routes, but I don't know where to place the child <router-view> since its location will always be dynamic based on which item was just clicked in order to expand.

I have a hunch it's related to named views but I can't wrap my head around it.

Any ideas welcome!

Tibi Neagu
  • 391
  • 1
  • 10
  • To update the URL, a place to start would be something like [`window.history.pushState`](https://stackoverflow.com/a/3503206/8230810)... I'm not sure about how you'd navigate to those pages directly though - you'll still need some form of dynamic routing to display these. – James Whiteley May 07 '19 at 11:32

1 Answers1

1

A similar topic came up on the Vue github page a while back, but involving the opening of modals as opposed to opening collapsing containers. One of the contributors to that thread wrote a pretty good blog post that might point you to a solution.

Once you get the dynamic routing sorted as they did above for modals, swapping the blurb for the article and animating the expansion should be fairly simple. The Vue docs cookbook has a good article on building a dynamic blog that should come in handy as well.

tony19
  • 125,647
  • 18
  • 229
  • 307
toakleaf
  • 909
  • 8
  • 11
  • 1
    thanks for this, seems very interesting and I will check it out in detail. In the meantime I have managed to achieve something that seems to solve my problem and I will post it here as a possible solution. – Tibi Neagu May 17 '19 at 13:04