Если мы используем Vue Router, то по умолчанию URL-адрес, созданный из компонента, содержит хэш-банг.

В этой статье мы рассмотрим, как удалить хеш-банг из URL-адреса в приложении Vue.js.

Режим истории

Мы можем удалить хэшбанг из URL-адреса, если установим Vue Router в режим истории.

Например, мы можем написать:

main.js

import Vue from "vue";
import App from "./App.vue";
import HelloWorld from "./views/HelloWorld.vue";
import VueRouter from "vue-router";
const routes = [{ path: "/hello", component: HelloWorld }];
Vue.config.productionTip = false;
Vue.use(VueRouter);
const router = new VueRouter({
  routes,
  mode: "history"
});
new Vue({
  render: (h) => h(App),
  router
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>

views/HelloWorld.vue

<template>
  <div class="hello">
    <h1>hello world</h1>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      name: "",
    };
  },
};
</script>

В main.js мы создаем экземпляр VueRouter с объектом, имеющим свойство routes.

А также у нас есть свойство mode, установленное на 'history'.

Как мы можем перейти к пути /hello без хеша.

Поэтому вместо перехода к /#/hello мы переходим к /hello.

Чтобы это работало, сервер должен быть правильно настроен.

Например, если мы используем сервер Apache, то мы настроили сервер так, чтобы он переходил на index.html при переходе по любому URL-адресу.

Таким образом, приложение Vue будет загружено вместо других вещей на сервере, поскольку index.html является домашней страницей приложения Vue, если приложение Vue развернуто на сервере.

Например, мы можем написать:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

С помощью Nginx мы настраиваем наш сервер, написав:

location / {
  try_files $uri $uri/ /index.html;
}

Другие конфигурации доступны по адресу https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations.

Заключение

Мы можем удалить хэш-банг из URL-адреса, заставив Vue Router использовать режим истории вместо хеш-режима по умолчанию.