Изучаю vue js пишу приложение и у меня возникла проблема с маршрутами. Среди этих маршрутов
const routes = [
{path: '/company', component: CreateCompany},
{path: '/home', component: Home},
{path: '/tasks', component: Tasks,name:'viewTasks'}
];
создаю такой маршрут
{path: '/tasks', component: Tasks,name:'viewTasks'}
на него есть ссылка на домашней странице
<router-link :to="{name: 'viewTasks', params: {id: project.id}}" ><button class="btn btn-success">×</button></router-link>
в которую я передаю id определенной записи, после чего после перехода по ссылке я получаю данные на странице, взяв id из http и положив его в axios запрос
mounted() {
let app = this;
let id = app.$route.params.id;
console.log(id);
app.taskId = id;
axios.get(`api/projects/${id}`)
.then(function(resp){
app.tasks = resp.data;
console.log(app.tasks);
});
Все работает но проблема в следующем при обновлении страницы компонента Task данные на странице пропадают
Также у меня есть два api из которых я беру данные api для домашней страницы
Route::resource('companies', 'CompanyController');
и api для задач
Route::resource('projects', 'ProjectController');
его маршрут такой taskstack/api/projects/3
пытаюсь писать маршруты следующим образом
{ path: '/tasks', component: Tasks, name: 'viewTasks' },
{ path: '/tasks/:id', component: OneTask, name: 'viewOneTask' }
но не выводит абсолютно никаких данных из моего api
в чем может быть проблема?
1 ответ
Похоже на то, что вы в path забыли добавить передачу :id, чтобы при переходе на конкретную задачу её идентификатор оставался в url. Поэтому, в случае при перезагрузке страницы не происходит передача id, так как взять его просто негде. Поправьте объявление маршрута на такое и всё должно заработать:
{ path: '/tasks/:id?', component: Tasks, name: 'viewTasks' }
При таком объявлении вы сможете внутри компонента Tasks выводить или все задачи или только одну конкретную. Но лучше разделить эти маршруты и в дополнение к пути вывода всех задач добавить путь для вывода конкретной задачи:
{ path: '/tasks', component: Tasks, name: 'viewTasks' },
{ path: '/tasks/:id', component: OneTask, name: 'viewOneTask' }
-
да я делал так но проблема была такая также не выводило данные и в консоли разраба пишет следующее Request URL: taskstack/tasks/api/projects/3 данные у меня тянутся из api, маршрут api такой taskstack/api/projects/3 18 ноя 2019 в 17:24
-
я так понимаю что ерунда в том что естественно добавляет мой маршрут api к маршруту написанному во vue, но не понимаю почему когда я задавал такой маршрут {path: '/home', component: Home} подобной проблемы не было 18 ноя 2019 в 17:28
-
Посмотреть бы на весь код в целом – тогда помочь было б проще. На гитхаб или ещё куда возможно выложить?– sirWill19 ноя 2019 в 21:55
-
sirWill, хорошо я сегодня выложу весь проект на гитхаб и скину вам ссылку, буду очень признателен если вы посмотрите 20 ноя 2019 в 6:22