Como remover hashbang do url?


Respostas:


484

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


4
Obrigado Bill, aqui você pode remover também o hashbang false, e aqui está o código:const router = new VueRouter({ history: true })
DokiCRO

2
Eu estava brincando com o github.com/vuejs/vue-hackernews e adicionando {history: true}trabalhos para a primeira página, mas o restante das rotas falhou.
Hari KT

Você quer dizer quando recarrega o aplicativo em outras rotas? Nesse caso, você precisa configurar seu servidor corretamente.
Bill Criswell

Por favor, faça vue.js 2 informações estar no início de resposta
diralik

2
Em qual arquivo ele deve ser adicionado?
Derzu

81

Para vue.js 2, use o seguinte:

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

5
Qual é a diferença entre esta resposta e a resposta aceita aqui?
Ilyas karim

15
A resposta aceita foi editada depois de perceber que essa era a solução. Você pode verificar o log de edição da resposta aceita.
Israel Morales

22

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".


20

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.


Isso funcionou para mim, diferente das outras respostas. Obrigado Adil!
Hugo S

10
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>

8

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!


2

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


0

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


2
Embora esse código possa fornecer uma solução para a pergunta, é melhor adicionar contexto ao porquê / como ele funciona. Isso pode ajudar os usuários futuros a aprender e aplicar esse conhecimento ao seu próprio código. Também é provável que você tenha um feedback positivo dos usuários na forma de upvotes, quando o código for explicado.
borchvm 16/03

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.