Question

我是Vue js的新手。我正在尝试存储数据。我正在将<router-view>加载到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>

您可以看到我有3个链接。如果单击jobseekercreate链接，它可以工作，但是如果刷新页面，则会出现404错误。如果刷新主页或关于链接的页面，则可以正常看到“主页”和“关于”组件。为什么如果我单击jobseekercreate链接可以正常工作，但是如果刷新页面却出现404 not found错误？

在JobSeekerCreate.vue组件中，当我单击“创建配置文件”按钮时，出现2个错误。

1）POST http://vuehighrjobs.test/jobseeker/create 404（未找到）？也许与上面的问题有关？

这是我的代码。具有createProfile方法的JobSeekerCreate.vue组件：

<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文件：

<!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>

，单击“创建配置文件”按钮时的第二个错误是： TypeError: Cannot read property 'experience' of undefined 不知道为什么，在单击“创建配置文件”按钮后，我会看到在Vue控制台的输入中输入的数据。查看截图。

Answer 1

它是因为您仅在laravel路由中获得了一个参数，因此它不会检测到它。您有两种解决方案，一种是接受所有这样的参数：

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

第二个是使用后备路由，更多详细信息https://laravel.com/docs/routing#fallback-routes

在提交Vue js和Laravel上找不到POST 404？

1 个答案: