¿Cómo eliminar hashbang de url?

¿Cómo eliminar hashbang #!de url?

Encontré la opción para deshabilitar hashbang en la documentación del enrutador vue ( http://vuejs.github.io/vue-router/en/options.html ) pero esta opción se elimina #!y simplemente se pone#

¿Hay alguna manera de tener una URL limpia?

Ejemplo:

NO: #!/home

PERO: /home

Se podría en realidad sólo desea establecer modea 'history'.

const router = new VueRouter({
  mode: 'history'
})

Sin embargo, asegúrese de que su servidor esté configurado para manejar estos enlaces. https://router.vuejs.org/guide/essentials/history-mode.html

Para vue.js 2 use lo siguiente:

const router = new VueRouter({
 mode: 'history'
})

Hash es una configuración predeterminada del modo vue-router, se establece porque con el hash, la aplicación no necesita conectar el servidor para servir la url. Para cambiarlo, debe configurar su servidor y establecer el modo en modo API de historial HTML5.

Para la configuración del servidor, este es el enlace para ayudarlo a configurar los servidores Apache, Nginx y Node.js:

https://router.vuejs.org/guide/essentials/history-mode.html

Entonces debe asegurarse de que el modo de enrutador vue esté configurado de la siguiente manera:

vue-router versión 2.x

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Para ser claros, estos son todos los modos vue-router que puede elegir: "hash" | "historia" | "resumen".

Para Vuejs 2.5 y vue-router 3.0, nada de lo anterior me funcionó, sin embargo, después de jugar un poco, lo siguiente parece funcionar:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
  ...
    ,
    { path: '*', redirect: '/' }, // catch all use case
  ],
})

tenga en cuenta que también necesitará agregar la ruta general.

window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

y el servidor está configurado correctamente En Apache, debe escribir la reescritura de la URL

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Citando los documentos.

El modo predeterminado para vue-router es el modo hash: utiliza el hash de URL para simular una URL completa para que la página no se vuelva a cargar cuando cambie la URL.

Para deshacernos del hash, podemos usar el modo de historial del enrutador, que aprovecha la API history.pushState para lograr la navegación URL sin una recarga de página:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Cuando se utiliza el modo de historial, la URL se verá "normal", por ejemplo, http://oursite.com/user/id . ¡Hermoso!

Sin embargo, aquí surge un problema: dado que nuestra aplicación es una aplicación del lado del cliente de una sola página, sin una configuración de servidor adecuada, los usuarios obtendrán un error 404 si acceden a http://oursite.com/user/id directamente en su navegador. Eso sí que es feo.

No se preocupe: para solucionar el problema, todo lo que necesita hacer es agregar una ruta de respaldo simple a su servidor. Si la URL no coincide con ningún activo estático, debe servir la misma página index.html en la que vive su aplicación. ¡Hermoso, de nuevo!

Los vue-routerusos hash-mode, en palabras simples, es algo que normalmente esperarías de una etiqueta achor como esta.

<a href="#some_section">link<a>

Para hacer desaparecer el hash

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
] // Routes Array
const router = new VueRouter({
  mode: 'history', // Add this line
  routes
})

Warning: Si no tiene un servidor configurado correctamente o está utilizando un usuario de SPA del lado del cliente, puede obtener un 404 Error si intenta acceder https://website.com/posts/3directamente desde su navegador. Vue Router Docs

El modo predeterminado para vue-router es el modo hash: utiliza el hash de URL para simular una URL completa para que la página no se vuelva a cargar cuando cambie la URL. Para deshacernos del hash, podemos usar el modo de historial del enrutador, que aprovecha la history.pushStateAPI para lograr la navegación URL sin una recarga de página:

import {routes} from './routes'; //import the routes from routes.js    

const router = new VueRouter({
    routes,
    mode: "history",
});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

routes.js

import ComponentName from './ComponentName';

export const routes = [
   {
      path:'/your-path'
      component:ComponentName
   }
]

Referencia

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Y si está utilizando AWS amplify, consulte este artículo sobre cómo configurar el servidor: modo de historial del enrutador Vue y AWS Amplify