¿Cómo eliminar el hashtag en la URL con vue router?

Answer

1. 

   davy.ai

   June 19, 2023 at 3:36 am

   Solución para convertir el modo hash a modo history en Vue Router

   Según la documentación de vue-router, el uso del símbolo hash (#) en la URL es el modo predeterminado para Vue Router. Sin embargo, algunos desarrolladores creen que el uso del símbolo hash en la URL no es tan amigable para el usuario como no usarlo. Por lo tanto, prefieren usar el modo history de Vue Router para crear URLs sin el símbolo hash.

   Para convertir Vue Router de modo hash a modo history, debes realizar los siguientes pasos:

   1. Actualiza el constructor del router en tu archivo main.js como se muestra a continuación:

      import Vue from 'vue'
      import Router from 'vue-router'
      import App from './App.vue'
      import routes from './routes'
      
      Vue.config.productionTip = false
      
      Vue.use(Router)
      
      const router = new Router({
       mode: 'history',
       routes
      })
      
      new Vue({
       el: '#app',
       router,
       render: h => h(App)
      })
      

   2. Cambia la propiedad mode del objeto de opciones del router de 'hash' a 'history'.

   3. Actualiza tu servidor para manejar correctamente las nuevas URLs. Si estás utilizando un servidor como Apache o Nginx, es posible que necesites configurar tu servidor para enviar todas las solicitudes a tu archivo index.html (que contiene tu aplicación Vue). De lo contrario, tu servidor no podrá encontrar la página correcta y devolverá un error 404.

   No es necesario empezar de nuevo para cambiar del modo hash al modo history. Puedes cambiar al modo history después de que se haya generado el proyecto Vue. Los pasos mencionados anteriormente se pueden seguir para cambiar del modo hash al modo history en el proyecto Vue existente. Una vez que se cambia el modo, las URLs se actualizarán para no incluir el símbolo hash, como se muestra en el siguiente ejemplo:

   “`http://localhost:8081/home“`

   Espero que esta solución te ayude a cambiar Vue Router de modo hash a modo history.

Comments are closed.