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!

Improve this question
1
  • To update the URL, a place to start would be something like window.history.pushState... 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. Commented May 7, 2019 at 11:32

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.