1
    Изучаю 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">&times;</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 ответ 1

0

Похоже на то, что вы в 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' }
4
  • да я делал так но проблема была такая также не выводило данные и в консоли разраба пишет следующее 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
  • Посмотреть бы на весь код в целом – тогда помочь было б проще. На гитхаб или ещё куда возможно выложить?
    – sirWill
    19 ноя 2019 в 21:55
  • sirWill, хорошо я сегодня выложу весь проект на гитхаб и скину вам ссылку, буду очень признателен если вы посмотрите 20 ноя 2019 в 6:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.