Если мы используем 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 использовать режим истории вместо хеш-режима по умолчанию.