Vue route only works after visiting root URL first

I'm using Vue Router to redirect https://example.com/foo to https://example.com/foo/randomID. This only works if the root URL https://example.com are visited first - otherwise a direct call of https://example.com/foo results in a 404 not found.

I can't figure out the root cause of this. What I've tried so far:

• New build
• Update NPM packages
• Clean install on server
• Clean Site Data via Chrome Dev Tools

router.js:

    import Vue from 'vue'
import Router from 'vue-router'
import Head from 'vue-head'
import Home from '@/views/Home'
import CheckLogin from '@/views/CheckLogin'
import { isNil } from 'lodash'
import store from '@/store'

Vue.use(Router)

/* If you don't know about VueHead, please refer to https://github.com/ktquez/vue-head */

Vue.use(Head, {
  complement: process.env.VUE_APP_TITLE
})

/* If you don't know about VueRouter, please refer to https://router.vuejs.org/ */

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        authNotRequired: true
      }
    },
    {
      path: '/check-login',
      name: 'check-login',
      component: CheckLogin,
      meta: {
        authNotRequired: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () =>
        import(
          /* webpackChunkName: "client-chunk-login" */ '@/views/Login.vue'
        ),
      meta: {
        authNotRequired: true
      }
    },
    {
      path: '/products',
      name: 'products',
      component: () =>
        import(
          /* webpackChunkName: "client-chunk-products" */ '@/views/Products.vue'
        )
    },
    {
      path: '/item/:id',
      name: 'item',
      props: true,
      component: () =>
        import(
          /* webpackChunkName: "client-chunk-product-details" */ '@/views/Item.vue'
        )
    },
    {
      path: '/list/:id',
      name: 'list',
      props: true,
      component: () =>
        import(
          /* webpackChunkName: "client-chunk-product-details" */ '@/views/List.vue'
        ),
      meta: {
        authNotRequired: true
      }
    },
    {
      path: '/list',
      name: 'listredirect',
      props: true,
      component: () =>
        import(
          /* webpackChunkName: "client-chunk-product-details" */ '@/views/Listredirect.vue'
        ),
      meta: {
        authNotRequired: true
      }
    },
    { path: '*', redirect: '/home' }
  ]
})

/**
 * Handle user redirections
 */
// eslint-disable-next-line consistent-return
router.beforeEach((to, from, next) => {
  if (
    !(to.meta && to.meta.authNotRequired) &&
    isNil(store.state.authentication.user)
  ) {
    const path =
      store.state.authentication.user === null ? '/login' : '/check-login'
    return next(`${path}?redirectUrl=${to.path}`)
  }
  next()
})

export default router

The vue.config.production.js:

  const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') // eslint-disable-line
  .BundleAnalyzerPlugin
const PrerenderSPAPlugin = require('prerender-spa-plugin') // eslint-disable-line
const prerenderedRoutesList = ['/login', '/home', '/']

// TODO stats raus aus dist -> plugin ganz raus?!
module.exports = {
  configureWebpack: {
    plugins: [
      /* Refer to https://www.npmjs.com/package/webpack-bundle-analyzer for more details */
      new BundleAnalyzerPlugin({
        analyzerMode: 'disabled',
        generateStatsFile: true
      }),
      /* See https://github.com/chrisvfritz/prerender-spa-plugin for more details */
      new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__rootDirname),
        // Required - Routes to prerender.
        routes: prerenderedRoutesList
      })
    ]
  }
}

The redirect component:

<template>
  <div>
    
  </div>
</template>

Any ideas on how to fix this issue are appreciated.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW