I have an Vue CLI 4 project working with lazy loading routes, all of those are working fine except one and I can't figure out why. That's so weird because only one route comes up, I am able to load it via eager loading i.e. something like this:
import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home";
import PasswordResetForm from "@/views/PasswordResetForm";
Vue.use(Router);
const routes = [
{
path: "/",
name: "home",
component: Home
},
{
path: "/iniciar-sesion/restablecer-contrasena",
name: "password_reset",
component: PasswordResetForm
}
]
const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
If I replace component: PasswordResetForm with conponent: () => import(/* webpackChunkName: "passwordReset" */ "../views/PasswordResetForm") so the component is not rendered neither the <router-view> tag and I don't have any idea what could be wrong.
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
"@vue/cli-plugin-pwa": "^4.5.12",
"@vue/cli-plugin-router": "^4.5.12",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
I don't have a lot of experience in Vue.js and I don't know if I'm skipping important information by posting this question but if that's the case please let me know.
Be patient with me guys.
Thanks in advance.