Rimuovere l'hash # dall'URL quando si utilizza Vue.js in Laravel Homestead

Question

Ho un setup di Laravel 5.2 in esecuzione in Homestead e utilizzo del router Vue.js per creare una SPA. Sto cercando di rimuovere completamente il #hash dall'URL che conosco può essere fatto, ma io continuo a ricevere errori:

che ho aggiunto al mio file rewrite ^(.+)$ /index.html last; vhosts a Homestead:

server { 

    listen 80; 
    listen 443 ssl; 
    server_name app.myproject.dev; 
    root "/home/vagrant/Code/vibecast/app.myproject.com/public"; 

    rewrite ^(.+)$ /index.html last; 

    index index.html index.htm index.php; 

    charset utf-8; 

    ... 

} 

Quando Riavvio e apro una pagina ottengo un 500 Internal Server Error.

C'è qualcosa che devo aggiungere alle rotte di Laravel?

var router = new VueRouter({ 
    hashbang: false, 
    history: true, 
    linkActiveClass: "active" 
}) 

posso farlo funzionare senza il #hash (o il file hosts modificati) durante la navigazione in giro, ma non riesce quando ricaricare una pagina.

Answer 1

sono riuscito a trovare una soluzione, tramite demo app di Matt Stauffer. Innanzitutto, non è necessario aggiornare il file vhosts. Solo bisogno di aggiornare il percorso SPA/Vue.js in routes.php a:

Route::get('/{vue?}', 'AppController@spa')->where('vue', '[\/\w\.-]*'); 

E naturalmente inizializzare il router Vue.js in questo modo:

const router = new VueRouter({ 
    history: true, 
    hashbang: false, 
    linkActiveClass: 'active' 
}) 
router.mode = 'html5' 

Rif: https://github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9

Answer 2

è necessario impostare la modalità router per html5 RE: http://vuejs.github.io/vue-router/en/api/properties.html

Così il nuovo codice sarebbe come:

var router = new VueRouter({ 
    hashbang: false, 
    history: true, 
    linkActiveClass: "active" 
}) 
router.mode = 'html5' 

Answer 3

router laravel

Route::any('{all}', function() { 
    return view('welcome');})->where(['all' => '.*']); 

Vue-router

012.

export default new Router({ 
    routes: [ 
     { path: '/', name: 'Home', component: HomeView }, 
     { path: '/category', name: 'Category', component: CategoryView }, 
     { path: '/topic', name: 'Topci', component: TopicView } 
    ], 
    mode: 'history' 
}) 

Answer 4

È possibile effettuare Vue Router e laravel Router lavorano insieme piacevolmente apportando le seguenti modifiche:

Alla fine del routes/web.php aggiungere le seguenti linee:

Route::get('{path}', function() { 
    return view('your-vuejs-main-blade'); 
})->where('path', '.*'); 

È necessario aggiungere questo alla fine del file perché è necessario conservare i percorsi laravel dichiarati in precedenza per funzionare correttamente e non essere sovrascritti dalla pagina 404 o dai percorsi di vue-router.

Nella configurazione del router Vue utilizzare il seguente:

import Vue from 'vue' 
import Router from 'vue-router' 

Vue.use(Router) 

let router = new Router({ 
    mode: 'history', //removes # (hashtag) from url 
    base: '/', 
    fallback: true, //router should fallback to hash (#) mode when the browser does not support history.pushState 
    routes: [ 
     { path: '*', require('../components/pages/NotFound.vue') }, 
     //... + all your other paths here 
    ] 
}) 
export default router 

Tuttavia, durante la navigazione tra le laravel e vista-router, è necessario tenere a mente che lasciare la pagina di Vue-router ad una pagina laravel è necessario utilizzare un codice window.location.href, un tag <a> o una sorta di programmatic navigation per uscire completamente dall'istanza di Vue-router.

testato questo con laravel 5.5.23, 2.5.9 Vue, Vue-Router 3.0.1