vue.js - Nuxt dynamic routes, addRoutes ssr, Errors: can't access property "scrollToTop" or other

Question

The problem with adding routes dynamically In the production version, I plan to use an ajax request that gives the "page type" in the plugin and add the appropriate routes. For the demonstration, I created the minimum set of code required to run and test the dynamic addition of routes, please see

My nuxt.config.js

module.exports = {
  ssr: true,
  mode: 'universal',
  srcDir: __dirname,
  loading: { color: '#007bff' },
    plugins: [
      {src: '~/plugins/route'}
    ],
 modules: [
    "@nuxtjs/axios",
    [
      'nuxt-i18n', {
      parsePages: false,
      pages: {
        contacts: {
          en: '/kont_test2',
          uk: '/kont_test3',
          ru: '/kont_test4',
      }},

      strategy:'prefix_except_default',
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        alwaysRedirect: true,
        fallbackLocale: 'en'
      },
      vueI18nLoader: true,
      locales: [
        {
          name: 'English',
          code: 'en',
          iso: 'en-US',
          file: 'en.js'
        },
        {
          name: 'Русский',
          code: 'ru',
          iso: 'ru-RU',
          file: 'ru.js'
        },
        {
          name: 'Укра?нська',
          code: 'uk',
          iso: 'uk-UA',
          file: 'uk.js'
        },
      ],

      lazy: true,
      loadLanguagesAsync: true,
      silentTranslationWarn:true,
      langDir: 'locales/',
      defaultLocale: 'ru',


    },
    ],],
  hooks: {
    generate: {
      done (generator) {
        // Copy dist files to public/_nuxt
        if (generator.nuxt.options.dev === false && generator.nuxt.options.mode === 'spa') {
          const publicDir = join(generator.nuxt.options.rootDir, 'public', '_nuxt')
          removeSync(publicDir)
          copySync(join(generator.nuxt.options.generate.dir, '_nuxt'), publicDir)
          copySync(join(generator.nuxt.options.generate.dir, '200.html'), join(publicDir, 'index.html'))
          removeSync(generator.nuxt.options.generate.dir)
        }
      },

    }
  },
  build: {
    extend (config, { isDev, isClient }) {
      config.node = {
        fs: "empty"
      }
    }
  }

}

In the config I add plugin "route", plugins/route.js source code

function interopDefault(promise) {
  return promise.then(m => m.default || m);
}


export default ({app, router, routeres}) => {

  //axios.defaults.baseURL = process.env.apiUrl;
  // console.log(app.router);
  //afterEach

  app.router.beforeEach((to, from, next) => {

    const matched = app.router.getMatchedComponents(to);
    console.log("matched: " + matched.length);
    console.log("to.path: " + to.path);


    let dynamicView = () => interopDefault(import('~pages/post.vue'));
   
    if (!matched.length) {
      console.log('not-exist');

      app.router.addRoutes([
        {
          path: to.path,
          component: dynamicView,    
        }], { override: true });


      next(to.path);

      
    } else {
      console.log('route exist');
      next()     
    }
    
  })
}

pages/post.vue

<template>
    <div class = "test">test post page for this path</div>
</template>

<script>
    export default {
       
    }
</script>

Сode is quite simplified, when checking if (! Matched.length) we add a simple march page "pages / post.vue" and should display the simple text "test post page for this path" For example, by contacting any url that does not exist, the route should be added. example.com/other_url From time to time I see errors: Cannot read property 'scrollToTop' of undefined (for now) Cannot read property 'layout' of undefined error (periodically) 404 page not found (periodically)

Link to "codesandbox" https://codesandbox.io/s/nuxt-nuxt-i18n-issue-1044-forked-t33du

question from:https://stackoverflow.com/questions/65893699/nuxt-dynamic-routes-addroutes-ssr-errors-cant-access-property-scrolltotop

Answer 1

Waitting for answers