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

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

Я нашел возможность отключить hashbang в документации по маршрутизатору 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. Чтобы изменить его, вы должны настроить свой сервер и установить режим в режим 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" | "история" | "Аннотация".

Для 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, пользователь может получить запрос, 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)
});

routes.js

import ComponentName from './ComponentName';

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

Ссылка

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

А если вы используете AWS Ampilify, ознакомьтесь с этой статьей о том, как настроить сервер: режим истории маршрутизатора Vue и AWS Amplify.