Como remover hashbang do url?

Como remover hashbang #!do url?

Encontrei uma opção para desativar o hashbang na documentação do roteador vue ( http://vuejs.github.io/vue-router/en/options.html ), mas essa opção remove #!e apenas coloca#

Existe alguma maneira de ter um URL limpo?

Exemplo:

NÃO: #!/home

MAS: /home

Você realmente só quero conjunto modepara 'history'.

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

Verifique se o servidor está configurado para lidar com esses links. https://router.vuejs.org/guide/essentials/history-mode.html

Para vue.js 2, use o seguinte:

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

Hash é uma configuração padrão do modo vue-router, é definida porque, com hash, o aplicativo não precisa conectar o servidor para servir a URL. Para alterá-lo, você deve configurar seu servidor e definir o modo para o modo HTML5 History API.

Para a configuração do servidor, este é o link para ajudá-lo a configurar os servidores Apache, Nginx e Node.js:

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

Depois, verifique se o modo do roteador vue está definido da seguinte maneira:

vue-router versão 2.x

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

Para deixar claro, esses são todos os modos de roteador vue que você pode escolher: "hash" | "história" | "resumo".

Para o Vuejs 2.5 e o vue-router 3.0, nada acima funcionou para mim, no entanto, depois de brincar um pouco, o seguinte parece funcionar:

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

observe que você também precisará adicionar o caminho abrangente.

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

e o servidor está configurado corretamente No apache, você deve escrever a URL reescrita

<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 os documentos.

O modo padrão do vue-router é o modo hash - ele usa o hash da URL para simular uma URL completa, para que a página não seja recarregada quando a URL for alterada.

Para se livrar do hash, podemos usar o modo de histórico do roteador, que aproveita a API history.pushState para obter a navegação por URL sem recarregar a página:

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

Ao usar o modo histórico, o URL parecerá "normal", por exemplo, http://oursite.com/user/id . Lindo!

Porém, aqui está um problema: como nosso aplicativo é um aplicativo de página única do cliente, sem uma configuração adequada do servidor, os usuários receberão um erro 404 se acessarem http://oursite.com/user/id diretamente no navegador. Agora isso é feio.

Não se preocupe: para corrigir o problema, tudo o que você precisa fazer é adicionar uma rota simples de recuperação geral ao servidor. Se o URL não corresponder a nenhum ativo estático, ele deverá exibir a mesma página index.html em que seu aplicativo reside. Lindo, novamente!

Os vue-routerusos hash-mode, em palavras simples, é algo que você normalmente esperaria de uma marca de achor como esta.

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

Para fazer o hash desaparecer

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

Warning: Se você não possui um servidor configurado corretamente ou está usando um usuário do SPA do lado do cliente, poderá obter um 404 Error se tentar acessar https://website.com/posts/3diretamente do navegador. Documentos do roteador Vue

O modo padrão do vue-router é o modo hash - ele usa o hash da URL para simular uma URL completa, para que a página não seja recarregada quando a URL for alterada. Para se livrar do hash, podemos usar o modo de histórico do roteador, que aproveita a history.pushStateAPI para obter a navegação por URL sem recarregar a 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
   }
]

Referência

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

E se você estiver usando o AWS amplify, consulte este artigo sobre como configurar o servidor: modo de histórico do roteador Vue e AWS Amplify