Як видалити hashbang з URL?


257

Як видалити hashbang #!з URL?

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

Чи є спосіб мати чистий URL?

Приклад:

НЕ: #!/home

АЛЕ: /home

Відповіді:


482

Ви б на самому ділі просто хочу , щоб встановити modeв 'history'.

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

Переконайтеся, що ваш сервер налаштований для обробки цих посилань. https://router.vuejs.org/guide/essentials/history-mode.html


4
Дякую Білл, тут ви можете видалити хешбанг помилково, ось код:const router = new VueRouter({ history: true })
DokiCRO

2
Я грав у github.com/vuejs/vue-hackernews і додав {history: true}роботи для першої сторінки, але решта маршрутів не вдалася.
Харі КТ

Ви маєте на увазі, коли ви перезавантажуєте додаток на інших маршрутах? Якщо так, вам потрібно правильно налаштувати ваш сервер.
Білл Крісвелл

Будь ласка, зробіть інформацію про vue.js 2 на початку відповіді
diralik

2
У який файл його слід додати?
Дерзу

81

Для vue.js 2 використовуйте наступне:

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

5
У чому тут різниця між цією відповіддю та прийнятою відповіддю?
Ілляс карим

15
Прийняту відповідь було відредаговано, зрозумівши, що це рішення, ви можете перевірити журнал редагування прийнятої відповіді.
Ізраїль Моралес

22

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

Для конфігурації сервера це посилання, яке допоможе вам налаштувати сервери Apache, Nginx і Node.js:

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

Тоді ви повинні переконатися, що режим маршрутизатора vue встановлений так:

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

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

Щоб було зрозуміло, це всі режими vue-router, які ви можете вибрати: "хеш" | "історія" | "реферат".


20

Для Vuejs 2.5 & vue-router 3.0 нічого вище не працювало для мене, проте, погравши трохи, наступне:

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

зауважте, що вам також потрібно буде додати загальний шлях.


Це працювало для мене на відміну від інших відповідей. Спасибі Аділь!
Hugo S

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

8

Цитуючи документи.

Типовим режимом для vue-router є хеш-режим - він використовує хеш URL-адрес, щоб імітувати повну URL-адресу, щоб сторінка не була перезавантажена при зміні URL-адреси.

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

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

При використанні режиму історії URL буде виглядати "нормально", наприклад http://oursite.com/user/id . Гарний!

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

Не хвилюйтесь: щоб виправити проблему, все, що вам потрібно зробити, - це додати простий маршрут резервного підключення до вашого сервера. Якщо URL-адреса не відповідає жодним статичним активам, вона повинна обслуговувати ту саму сторінку index.html, на якій живе ваш додаток. Знову прекрасно!


2

У vue-routerвикористанні hash-mode, в простих словах це те , що ви зазвичай очікуєте від Ахора тега , як це.

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

Щоб хеш зник

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

Warning: Якщо у вас немає належним чином налаштованого сервера або ви використовуєте клієнтський SPA-сервер, користувач SPA може отримати клієнт, 404 Error якщо спробує отримати доступ https://website.com/posts/3безпосередньо зі свого браузера. Vue Router Docs


0

Типовим режимом для vue-router є хеш-режим - він використовує хеш URL-адрес, щоб імітувати повну URL-адресу, щоб сторінка не була перезавантажена при зміні URL-адреси. Щоб позбутися хешу, ми можемо використовувати режим історії маршрутизатора, який використовує history.pushStateAPI для досягнення навігації по URL без перезавантаження сторінки:

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)
});

route.js

import ComponentName from './ComponentName';

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

Довідково


2
Хоча цей код може вирішити питання, краще додати контекст, чому / як він працює. Це може допомогти майбутнім користувачам навчитися та застосувати ці знання до власного коду. Ви також можете мати позитивні відгуки від користувачів у вигляді оновлень, коли пояснюється код.
borchvm

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.