Я новичок в 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, она работает, но если я обновлю sh страницу, я получаю ошибку 404. Если я перефразирую sh страницу на домашней странице или о ссылках, я вижу компоненты Home и About как обычно. Почему, если я нажимаю jobseekercreate ссылку, она работает, но если я обновляю sh страницу, я получаю ошибку 404 не найдена?
В JobSeekerCreate. vue Компонент, когда я нажимаю кнопку «Создать профиль» Я получаю 2 ошибки.
1) POST http://vuehighrjobs.test/jobseeker/create 404 (не найдено)? Может быть, это как-то связано с проблемой выше?
Вот мой код. JobSeekerCreate. vue Компонент с методом createProfile:
<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>
маршрутов. 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>
и вторая ошибка при нажатии кнопки «Создать профиль»: TypeError: Cannot read property 'experience' of undefined Не знаю, почему После того, как я нажму кнопку «Создать профиль», я увижу данные, которые я ввел во входы в консоли Vue. Смотрите скриншот. 