Bagaimana cara menghapus hashbang dari url?

Bagaimana cara menghapus hashbang #!dari url?

Saya menemukan opsi untuk menonaktifkan hashbang di dokumentasi router vue ( http://vuejs.github.io/vue-router/en/options.html ) tetapi opsi ini menghapus #!dan hanya meletakkan#

Apakah ada cara untuk mendapatkan url yang bersih?

Contoh:

TIDAK: #!/home

TAPI: /home

Anda sebenarnya hanya ingin diatur modeke 'history'.

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

Pastikan server Anda dikonfigurasi untuk menangani tautan ini. https://router.vuejs.org/guide/essentials/history-mode.html

Untuk vue.js 2 gunakan yang berikut ini:

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

Hash adalah pengaturan mode vue-router default, ini diatur karena dengan hash, aplikasi tidak perlu menghubungkan server untuk melayani url. Untuk mengubahnya, Anda harus mengkonfigurasi server Anda dan mengatur mode ke mode API Sejarah HTML5.

Untuk konfigurasi server, ini adalah tautan untuk membantu Anda mengatur server Apache, Nginx dan Node.js:

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

Maka Anda harus memastikan, bahwa mode router vue diatur seperti berikut:

vue-router versi 2.x

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

Agar jelas, ini semua mode vue-router yang dapat Anda pilih: "hash" | "sejarah" | "abstrak".

Untuk Vuejs 2.5 & vue-router 3.0 tidak ada yang berhasil bagi saya, namun setelah bermain-main sedikit hal berikut ini tampaknya berfungsi:

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

perhatikan bahwa Anda juga perlu menambahkan jalur tangkap semua.

window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

dan server dikonfigurasi dengan benar Di apache Anda harus menulis url menulis ulang

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

Mengutip dokumen.

Mode default untuk vue-router adalah mode hash - menggunakan hash URL untuk mensimulasikan URL lengkap sehingga halaman tidak akan dimuat ulang ketika URL berubah.

Untuk menghilangkan hash, kita dapat menggunakan mode histori router, yang memanfaatkan API history.pushState untuk mencapai navigasi URL tanpa memuat ulang halaman:

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

Saat menggunakan mode riwayat, URL akan terlihat "normal," misalnya http://oursite.com/user/id . Cantik!

Namun, ada masalah: Karena aplikasi kami adalah aplikasi sisi klien satu halaman, tanpa konfigurasi server yang tepat, pengguna akan mendapatkan kesalahan 404 jika mereka mengakses http://oursite.com/user/id langsung di browser mereka. Nah, itu jelek.

Jangan khawatir: Untuk memperbaiki masalah ini, yang perlu Anda lakukan adalah menambahkan rute catch-all fallback sederhana ke server Anda. Jika URL tidak cocok dengan aset statis apa pun, URL harus melayani halaman index.html yang sama dengan tempat tinggal aplikasi Anda. Cantik, lagi!

The vue-routerpenggunaan hash-mode, dalam kata-kata sederhana itu adalah sesuatu yang biasanya Anda harapkan dari sebuah tag Akhor seperti ini.

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

Untuk membuat hash menghilang

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

Warning: Jika Anda tidak memiliki server yang dikonfigurasi dengan benar atau Anda menggunakan pengguna SPA sisi-klien dapat mendapatkan 404 Error jika mereka mencoba mengakses https://website.com/posts/3langsung dari browser mereka. Vue Router Documents

Mode default untuk vue-router adalah mode hash - menggunakan hash URL untuk mensimulasikan URL lengkap sehingga halaman tidak akan dimuat ulang ketika URL berubah. Untuk menghilangkan hash, kita dapat menggunakan mode histori router, yang memanfaatkan history.pushStateAPI untuk mencapai navigasi URL tanpa memuat ulang halaman:

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
   }
]

Referensi

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

Dan jika Anda menggunakan AWS amplify, periksa artikel ini tentang cara mengkonfigurasi server: Mode histori router Vue dan AWS Amplify