Как удалить hashbang из url?

Как удалить hashbang #! из url?

Я нашел вариант отключить hashbang в документации vue router (http://vuejs.github.io/vue-router/en/options.html), но этот параметр удаляет #! и просто кладет #

Есть ли способ иметь чистый URL?

Пример:

НЕ: #!/home

НО: /home

Ответ 1

На самом деле вы просто хотите установить mode на 'history'.

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

Убедитесь, что ваш сервер настроен на обработку этих ссылок.https://router.vuejs.org/guide/essentials/history-mode.html

Ответ 2

Для vue.js 2 используйте следующее:

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

Ответ 3

Хэш - это режим по умолчанию для vue-router, он установлен потому, что при использовании хэша приложению не требуется подключать сервер для обслуживания URL. Чтобы изменить его, вы должны настроить свой сервер и установить режим в режим HTML5 History API.

Для настройки сервера это ссылка, которая поможет вам настроить серверы Apache, Nginx и Node.js:

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

Затем вы должны убедиться, что режим vue router установлен следующим образом:

vue-router версия 2.x

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

Для ясности, это все режимы vue-router, которые вы можете выбрать: "hash" | "история" | "Абстрактные".

Ответ 4

Для Vuejs 2.5 & vue-router 3.0 Ничто из вышеперечисленного у меня не сработало, однако, немного поиграв, похоже, работает следующее:

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

обратите внимание, что вам также необходимо добавить общий путь.

Ответ 5

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

и сервер настроен правильно. В apache вы должны написать переписывание 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>

Ответ 6

Цитирование документов.

Режимом по умолчанию для vue-router является режим хеширования - он использует хеш URL для имитировать полный URL-адрес, чтобы при перезагрузке страница не перезагружалась изменения.

Чтобы избавиться от хеша, мы можем использовать режим истории маршрутизатора, который использует API history.pushState для перехода по URL без перезагрузка страницы:

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

When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!

Однако возникает проблема: поскольку наше приложение представляет собой одностраничный клиент приложение, без правильной настройки сервера, пользователи получат Ошибка 404, если они обращаются к http://oursite.com/user/id непосредственно в своем браузер. Теперь это безобразно.

Не волнуйтесь: чтобы решить эту проблему, все, что вам нужно сделать, это добавить простую универсальный запасной маршрут к вашему серверу. Если URL не совпадает ни с одним статические ресурсы, они должны обслуживать ту же страницу index.html, что и ваше приложение живет в. Красиво, снова!