Передав переменную js, чтобы указать, какой вид (компонент blade) должен быть загружен

Question

Когда пользователь щелкает элемент навигации, содержимое внутри div должно изменяться асинхронно в соответствии с выбранным элементом, но я не хочу иметь маршрут к каждому из параметров элемента

, например:

<ul>
   <li id="divContentOne"> (each id has the same name of the view, so 
 the first li has to load divContentOne.blade.php)
   </li>
 ...
 ...
 a lot of li
 ...
</ul>

<div id="toload">

</div>

пользователь нажимает на первый элемент

 <script> ul.addEventListener('click', function(e) {
    Id =  e.target.id;
            asyncFunc();
          });
 </script>

запускает асинхронную функцию

Моя идея - передать идентификаторна контроллер с сообщением, concac (id. 'blade.php') и верните желаемое представление как

если у вас, ребята, есть другое решение, пожалуйста, скажите мне, спасибо

ЯПосле некоторой борьбы за метод post я получаю 419 (неизвестный статус)

Мой код на данный момент:

const reportsMenuBlock = document.getElementsByClassName('reports-menu- 
block');
const reportWrapper = document.getElementById('report-wrapper');

//async function

function makeRequest() {
  const token = document.querySelector('meta[name="csrf-token"]').content;
  url = '/reports/asyncPost';

  fetch(url,{
    method: 'POST',
    credentials: 'omit',
    mode: 'same-origin',
    headers:{
        "Content-Type": "application/json; charset=utf-8",
        "X-CSRF-TOKEN": token
    },
    body: JSON.stringify(reportId)
    });
  } 



// take the id of the item menu clicked and calls the async function

for(i = 0; i < reportsMenuBlock.length; i++){
 reportsMenuBlock[i].addEventListener('click', function(e) {
    reportId =  e.target.id;
    makeRequest();
});
};

Мой маршрут:

Route::post('/reports/asyncPost', 'ViewController@asyncReports')- 
>name('asyncReports');

Мой контроллер:

  public function asyncReports()
{
    $dados = $Request;
}