I read the following note from vue router documentation
Note: when using the history mode, the server needs to be properly configured so that a user directly visiting a deep link on your site doesn't get a 404.
So, I try to configure my nginx like the following
server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;
    root /var/www/laravel/public/;
    index index.php index.html index.htm;
    server_name working.dev;
    location /user {
        rewrite ^(.+)$ /index.php last;
    }
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}
And the following is my Vue configuration
var router = new VueRouter({
    hashbang: false,
    history: true,
    linkActiveClass: "active",
    root:  '/user'
});
But, I still got 404 when user directly visiting a deep link in my site.
Edited: I use Laravel routing too. The Following is my laravel routing.
Route::get('user', function() {
    return View::make('user.index');
});
                I just read mattstauffer blog post and finally found way to do in Laravel route. Like the following
Route::get('user/{vue_capture?}', function() {
    return View::make('user.index');
})->where('vue_capture', '[\/\w\.-]*');
It does not return 404 when user directly visiting a deep link to site.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With