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

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

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

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

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

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".

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.

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>

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!

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ı

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

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

AWS yükseltmesi kullanıyorsanız, sunucuyu yapılandırma hakkında bu makaleye bakın: Vue yönlendiricinin geçmiş modu ve AWS Yükseltmesi