POST 404 not found on submit Vue js and Laravel?

I’m new to Vue js. I’m trying to store data. I’m loading <router-view> in welcome.blade.php:

<div id="app">
    <router-view></router-view>

    <br>
    <router-link :to="{ name: 'home' }">Home</router-link>
    <router-link :to="{ name: 'about' }">About</router-link>
    <router-link :to="{ name: 'jobseekercreate' }">Job Seeker Create</router-link>

</div>

You can see I have 3 links. If I click on the jobseekercreate link, it works, but if I refresh the page I get a 404 error. If I refresh the page on home or about links, I see the Home and About components as normal. Why if I click jobseekercreate link it works, but if I refresh the page I get 404 not found error?

In JobSeekerCreate.vue Component, when I click on ‘create profile’ button I get 2 errors.

1) POST http://vuehighrjobs.test/jobseeker/create 404 (not found)? Maybe this has something to do with issue above?

Here is my code. JobSeekerCreate.vue Component with createProfile method:

<style>
    [v-cloak] {
        display: none;
    }
</style>
<template>
<div class="row">

                            <div class="col-md-10 offset-md-1">

                                <div class="alert alert-danger" v-if="errors.length > 0">
                                    <ul>
                                        <li v-for="error in errors">{{error}}</li>
                                    </ul>
                                </div>

                                <h1>Create Profile</h1>

                                <div class="form-group">
                                    <label for="experience">Experience:</label>
                                    <textarea class="form-control" v-model="jobseekerprofile.experience" id="experience" rows="10" maxlength="1000"></textarea>
                                </div>

                                <div class="form-group">
                                    <label for="additional-skills">Additional Skills (optional):</label>
                                    <textarea class="form-control" v-model="jobseekerprofile.additional_skills" id="additional-skills" rows="3" maxlength="250"></textarea>
                                </div>

                                <div class="form-group">
                                    <button @click="createProfile" type="submit" class="btn btn-primary">Create Profile</button>
                                </div>
                                <br><br><br><br>

                            </div>

                        </div>
</template>
<script>
    import Admin from './Admin'
    import AdminSideNav from '../components/AdminSideNav'

    export default {
        name: 'JobSeekerCreate',
        components: {
            Admin,
            AdminSideNav
        },

        data(){

            return {

                jobseekerprofile:{
                    experience: '',
                    additional_skills: ''
                },
                jobseekerprofiles: [],
                uri: 'http://vuehighrjobs.test/jobseeker/create',
                errors: [],
                loading: false

            }

        },

        methods: {

            createProfile(){

                axios.post(this.uri, {name: this.jobseekerprofile.experience, body: this.jobseekerprofile.additional_skills})

                    .then(response=>{

                        this.jobseekerprofiles.push(response.data.jobseekerprofile);
                        this.resetData();

                    })

                    .catch(error=>{

                        this.errors = [];

                        if(error.response.data.errors.experience){
                            this.errors.push(error.response.data.errors.experience[0])
                        }

                        if(error.response.data.errors.additional_skills){
                            this.errors.push(error.response.data.errors.additional_skills[0])
                        }

                    });

            }

        }

    }
</script>

routes.js:

import Home from './views/Home'
import About from './views/About'
import JobSeekerCreate from './views/JobSeekerCreate'

export default {
    mode: 'history',

    routes: [

        {
            path: '/',
            component: Home,
            name: 'home'
        },

        {
            path: '/about',
            component: About,
            name: 'about'
        },

        {
            path: '/jobseeker/create',
            component: JobSeekerCreate,
            name: 'jobseekercreate'
        },

    ]
}

web.php:

Route::get('/{any?}', function () {
   return view('welcome');
});

api.php:

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::resource('jobseekerprofile', 'JobSeekerProfileController');

welcome.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Highr Jobs</title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/main.css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Font Awesome icons -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">

    <!-- Custom fonts for this template-->
    <link href="css/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- tempusdominus Bootstrap 4 Date and Time CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    <style type="text/css">
        .fc-title {
            white-space: normal !important;
        }

        h1, h2, h3, h4 {
            font-family: 'Oswald', Helvetica, sans-serif;
            text-transform: uppercase;
            font-weight: bold;
        }

        .text-white {
            color: #5a5c69!important;
        }

        #search {
            border: 1px solid #5a5c69 !important;
        }

        @media only screen and (max-width: 767px) {

            .sidebar-brand img {
                width: 88px !important;
            }

        }
    </style>

    <!-- Laravel Full Calendar   https://investmentnovel.com/laravel-full-calendar-tutorial-with-example/ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>

</head>
<body>

<div id="app">
    <router-view></router-view>

    <br>
    <router-link :to="{ name: 'home' }">Home</router-link>
    <router-link :to="{ name: 'about' }">About</router-link>
    <router-link :to="{ name: 'jobseekercreate' }">Job Seeker Create</router-link>

</div>

<script src="/js/app.js"></script>
</body>
</html>

and Second error when click ‘create profile’ button is: TypeError: Cannot read property 'experience' of undefined Not sure why, after I click ‘create profile’ button I see the data I entered in the inputs in the Vue console. See screenshot.

Answer

its because you just get one parameter in laravel route so its doesnt detect it. you have two solution one is accept all parameters like this:

Route::get('/{any?}', function () {
   return view('welcome');
})->where('any', '.*');

second is use fallback route here more details https://laravel.com/docs/routing#fallback-routes