Intenté usar el modo de historial en vue.js para eliminar el signo hash de la URL. La desventaja de esto es que cuando la página se actualizó / volvió a visitar, aparece 404 No encontrado. Hay una documentación del sitio web sobre el modo Historial y cómo solucionarlo, pero tengo problemas para entenderlo, lo siento.
Lo que quiero es eliminar el modo de historial del código, al mismo tiempo que se elimina el símbolo hash de la URL y se corrige el error 404.
Proporcionaré el código a continuación del index.js que tiene la web. ( Nota: el sitio web ya está construido de esta manera y me lo pasaron a mí porque el desarrollador que lo hizo tenía problemas).
Vue.use(VueRouter); const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => err); }; const router = new VueRouter({ mode:"history", routes, }); const isLogin = true; router.beforeEach((to, from, next) => { document.title = to.meta.title; if (to.name == "login" || isLogin) { next(); } else { next("/login"); } }); router.beforeResolve((to, from, next) => { next(); }); router.afterEach((to, from) => { }); export default router;¿Necesito hacer un nuevo conjunto de códigos para poder hacer lo que quiero? El error 404 se solucionó cuando la página se actualizó / volvió a visitar, el símbolo hash se eliminó de la URL.
El modo predeterminado para Vue Router es el modo hash. Utiliza un hash de URL para simular una URL completa para que la página no se vuelva a cargar cuando cambie la URL. Modo comentar o eliminar: "historial"
const router = new VueRouter({ //mode:"history", routes, });Vea el caso de ejemplo aquí https://www.bezkoder.com/integrate-vue-spring-boot/
Encontré este problema hace algún tiempo, solo tiene que configurar el modo de enrutador vue e instalar un paquete para el servidor, y configurar el servidor también. Aquí les dejo la guía oficial.
Configuración del enrutador Vue:
const router = new VueRouter({ mode: 'history',//Set the mode to 'history' routes: [...] })Configuración del servidor (NO express):
const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.html', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.html" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) })Para el servidor express node.js: Para Node.js/Express, considere usar el middleware connect-history-api-fallback .