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

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

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

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

Приклад:

НЕ: #!/home

АЛЕ: /home

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

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

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

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

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

Хеш - це параметр режиму 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, які ви можете вибрати: "хеш" | "історія" | "реферат".

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

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

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

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>

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

Типовим режимом для 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, на якій живе ваш додаток. Знову прекрасно!

У 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

Типовим режимом для 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
   }
]

Довідково

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

А якщо ви використовуєте AWS amplify, перегляньте цю статтю про те, як налаштувати сервер: режим історії маршрутизатора Vue та AWS Amplify