# Solutions

Problems that we came across and solutions to them. If you have any better ideas, please feel free to propose a PR or issue.

  1. A route can create different caches with different route.params or route.query:

    set a key prop to <router-view>.

  2. Caches control with <keep-alive>:

    1. Get instance of <keep-alive>:


    2. Match and remove cache.

      1. Match: $alive.cache[i].data.key === key

      2. Destroy: $alive.cache[key].componentInstance.$destroy()

      3. Remove key from $alive.keys.

  3. Refresh page component.

    1. Remove cache of page.

    2. Hide <router-view> by v-if and show it after transition ends or nextTick.

  4. Get the routing depth where the current component is:

    Recursively find the corresponding value of the nearest parent component with $vnode.data.routerViewDepth.

  5. Nested Routes share same tabs:

    Get path of current matched route from $route.matched.

  6. Visit page a from a keep-alive nested route, and go to a page of another route, then visit page b from the same nested route. The displayed page is still a:

    Run $forceUpdate to force update the component on the page activated.

    Side effect: Subroutine page a will still trigger the activated hook

  7. Iframe tab gets reloaded on switching:

    1. Extract <iframe> to outer layer of <router-view>, and show/hide it via v-show.

    2. Create a separate iframe route component, and manage <iframe> dom element in lifecycle hook methods, i.e., add, show, hide and remove.

  8. Js bundle size gets too big:

    When building as lib, set useBuiltIns to false in babel.config.js, which means not including Polyfill in final bundle.

Last updated: 9/27/2020, 2:16:26 AM