I added prerendering to my vue.js application by configuring prerender-spa-plugin. The pre-rendered sites work fine (i.e https://www.buyforlifeproducts.com/about), but when I route to a non-prerendered site, it loads the root page https://www.buyforlifeproducts.com/ first and then redirects to the correct route i.e https://www.buyforlifeproducts.com/products/199
Here is my vue.config.js
module.exports = {
outputDir,
assetsDir,
configureWebpack: config => {
config.plugins.push(
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: [ '/', '/about', '/products/23', '/products/2', '/products/8', '/products/18', '/products/15', '/products/11', '/products/7', '/products/42', '/products/41', '/products/40', '/products/30', '/products/127', '/products/39', '/products/32', '/products/6', '/products/26', '/products/114' ],
renderer: new Renderer({
renderAfterElementExists: '#app',
renderAfterTime: 5000,
headless: true
}),
})
);
}
In order to make history router-mode work on Netlify, I had to add a _redirects file to my /public folder with the following content: /* /index.html 200
What am I missing? Why is the root page / loading before redirecting to a non-prerendered route?