Search code examples
vue.jsvuejs2vuexnuxt.js

Approach for "bookmark" layout


I am not pretty sure if in web development this kind of thing is called as a 'bookmark' layout. I'll explain on below screen. enter image description here

I would like to achieve something like this and missing a knowledge of how to do that. Could someone point me where should I anchore ? I could not find anything in web / probably looking with using bad phrases.

This component would be part of the application, after we push to the router path it's going to display this kind of layout. Basically I could achieve this buy keep pushing a different route for each page, but what if those pages belongs to "one model comoponent" I wouldn't like to reload them all of the time while switching them, just once after we entry to each. It would work like a tab bar in mobile apps (iOS).


Solution

  • In many UI contexts (e.g. browsers, macOS applications, etc.) and in Web Development, what you refer to as "bookmark layout" is simply called tabs (like the iOS tab bar that you also mention).

    I wouldn't like to reload them all of the time while switching them

    Vue offers you the built-in component <keep-alive> for such use case:

    When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them.

    See the Vue guide: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components

    When switching between these components though, you’ll sometimes want to maintain their state or avoid re-rendering for performance reasons. […]

    To solve this problem, we can wrap our dynamic component with a <keep-alive> element