Hashbang url'den nasıl kaldırılır?


259

Hashbang url'den nasıl kaldırılır #!?

Vue yönlendirici belgelerinde hashbang'ı devre dışı bırakma seçeneği buldum ( http://vuejs.github.io/vue-router/en/options.html ) ancak bu seçenek kaldırılıp #!yeni koyuldu#

Temiz URL'ye sahip olmanın herhangi bir yolu var mı?

Misal:

DEĞİL: #!/home

FAKAT: /home

Yanıtlar:


486

Aslında sadece sette isterdim modeiçin 'history'.

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

Ancak sunucunuzun bu bağlantıları kullanacak şekilde yapılandırıldığından emin olun. https://router.vuejs.org/guide/essentials/history-mode.html


4
Teşekkür Bill burada sen de hashbang yanlış kaldırabilirsiniz kodu:const router = new VueRouter({ history: true })
DokiCRO

2
Github.com/vuejs/vue-hackernews ile oynuyordum ve {history: true}ilk sayfa için çalışmalar ekledim , ancak rotaların geri kalanı başarısız oldu.
Hari KT

Uygulamayı başka rotalara yeniden yüklediğinizde mi demek istediniz? Öyleyse, sunucunuzu doğru bir şekilde yapılandırmanız gerekir.
Bill Criswell

Lütfen vue.js 2 bilgisini yanıtın başında olun
diralik

2
Hangi dosyaya eklenmelidir?
Derzu

81

Vue.js 2 için aşağıdakileri kullanın:

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

5
Bu cevap ile kabul edilen cevap arasındaki fark nedir?
Ilyas karim

15
Kabul edilen cevap, bunun çözüm olduğunu fark ettikten sonra düzenlendi, kabul edilen cevabın düzenleme günlüğünü kontrol edebilirsiniz.
Israel Morales

22

Hash varsayılan bir vue-router modu ayarıdır, çünkü hash ile uygulamanın url'yi sunmak için sunucuyu bağlaması gerekmez. Değiştirmek için sunucunuzu yapılandırmalı ve modu HTML5 Geçmişi API modu olarak ayarlamalısınız.

Sunucu yapılandırması için bu, Apache, Nginx ve Node.js sunucularını ayarlamanıza yardımcı olacak bağlantıdır:

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

Ardından, vue yönlendirici modunun aşağıdaki gibi ayarlandığından emin olmalısınız:

vue-router sürüm 2.x

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

Açıkça belirtmek gerekirse, bunlar seçebileceğiniz tüm vue-router modlarıdır: "hash" | "tarih" | "Öz".


20

Vuejs 2.5 ve vue-router 3.0 için yukarıdaki hiçbir şey benim için işe yaramadı, ancak biraz oynadıktan sonra aşağıdakiler işe yarıyor gibi görünüyor:

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

tümünü yakalama yolunu da eklemeniz gerekeceğini unutmayın.


Diğer cevapların aksine bu benim için çalıştı. Teşekkürler Adil!
Hugo S

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

ve sunucu düzgün yapılandırıldı Apache'de url yeniden yazma yazmalısınız

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

8

Dokümanlardan alıntı yapılıyor.

Vue-router için varsayılan mod karma moddur - URL değiştiğinde sayfanın yeniden yüklenmemesi için tam URL'yi simüle etmek için URL karma değerini kullanır.

Karmadan kurtulmak için, sayfanın yeniden yüklenmesi olmadan URL'de gezinme sağlamak üzere history.pushState API'sından yararlanan yönlendiricinin geçmiş modunu kullanabiliriz:

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

Geçmiş modunu kullanırken URL "normal" görünecektir, örneğin http://oursite.com/user/id . Güzel!

Yine de bir sorun geliyor: Uygulamamız uygun bir sunucu yapılandırması olmadan tek sayfalık bir istemci tarafı uygulaması olduğundan, kullanıcılar http://oursite.com/user/id adresine erişirlerse 404 hatası alırlar. doğrudan tarayıcılarından . Şimdi bu çirkin.

Endişelenmeyin: Sorunu çözmek için tek yapmanız gereken, sunucunuza basit bir tümünü yakalama yolu eklemektir. URL herhangi bir statik öğeyle eşleşmiyorsa, uygulamanızın içinde bulunduğu index.html sayfasının aynısını sunmalıdır. Yine güzel!


2

vue-routerKullanımları hash-mode, basit bir deyişle bu normalde böyle bir Achor etiketi beklene şeydir.

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

Karma ortadan kaldırmak için

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

Warning: Düzgün yapılandırılmış bir sunucunuz yoksa veya istemci tarafı bir SPA kullanıcısı kullanıyorsanız , tarayıcılarından doğrudan 404 Error erişmeye çalışırlarsa bir alabilirsiniz https://website.com/posts/3. Vue Router Dokümanları


0

Vue-router için varsayılan mod karma moddur - URL değiştiğinde sayfanın yeniden yüklenmemesi için tam URL'yi simüle etmek için URL karma değerini kullanır. Karmadan kurtulmak için, history.pushStatesayfanın yeniden yüklenmesi olmadan URL'de gezinme sağlamak üzere API'dan yararlanan yönlendiricinin geçmiş modunu kullanabiliriz :

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

Referans


2
Bu kod soruya bir çözüm sunabilse de, neden / nasıl çalıştığına ilişkin bağlam eklemek daha iyidir. Bu, gelecekteki kullanıcıların bu bilgileri öğrenmesine ve kendi kodlarına uygulamalarına yardımcı olabilir. Kod açıklandığında, kullanıcılardan upvotes şeklinde olumlu geri bildirimler almanız da muhtemeldir.
borchvm

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.