Navigating between pages with API call on beforeRouteEnter issue

[pedromelo222]

When navigation from page A to B with a different layout and page B needs to fetch data inside beforeRouteEnter, the child component of page A will be recreated within the layout of page B until next () is called and then destroyed again.

i think it's the same problem #192
the problem happens because the layout is changed within router.beforeEach () while beforeRouterEnter has not finished fetching data,

I fixed making the layout change only when the data is fetched (beforeResolve).

components/App.vue

methods: {    
    /**
     * Apply the application layout
     */
    applyLayout(){
      this.layout = this.nextLayout;
      this.nextLayout = null;
    },
     /**
     * Set the next page layout.
     *
     * @param {String} layout
     */
    setLayout(layout) {
      if (!layout || !layouts[layout]) {
        layout = this.defaultLayout;
      }
      this.nextLayout = layouts[layout];
    }
  }

router/index.js

/**
 * Create a new router instance.
 *
 * @return {Router}
 */
function createRouter () {
  const router = new Router({
    scrollBehavior,
    mode: 'history',
    routes
  })

  router.beforeEach(beforeEach)
  router.afterEach(afterEach)
  router.beforeResolve(beforeResolve)

  return router
}

async function beforeResolve (to, from, next) {
  router.app.applyLayout()
  next();
}