Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have an Archives Page for my articles. Each link on the archives page has a query string in its href attribute, just like Jeffrey taught us in the "Laravel 5.4 From Scratch: Archives" tutorial. On this and every other page, my Vue components (Header, Footer, Newsletter SignUp) load perfectly fine. However, when I click on one of the links,
<a href="/the-journal/archives/list?month={{ $stats->month }}&year={{ $stats->year }}">
{{ $stats->month }} {{ $stats->year }}</a>
, in the Archives page, my Vue components fail to load, but my blade template for the Archives List page loads just fine.
Archives Blade Template
@extends("integral.integralLayouts.master")
@section("title")The Archives
@endsection
@section("Styles")
<link type="text/css" rel="stylesheet" href="/css/archives.css"/>
@endsection
@section("sectionOne")
<div id="archiveSectionOne">
<div id="archiveSectionOneWrapper">
<p>Archives</p>
</div>
</div>
@endsection
@section("sectionTwo")
<div id="archiveSectionTwo">
<ul>
@foreach($archives as $stats)
<li>
<a href="/the-journal/archives/list?month={{ $stats->month }}&year={{ $stats->year }}">
{{ $stats->month }} {{ $stats->year }}</a>
</li>
@endforeach
</ul>
</div>
@endsection
@section("Scripts")
@endsection
Master Blade Template
<!DOCTYPE html>
<html>
<head>
<title>@yield("title")</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="/css/testapparelHeaderFooter.css">
<link type="text/css" rel="stylesheet" href="/css/mobilemenu.css">
<link type="text/css" rel="stylesheet" href="/css/sidecart.css">
<link rel="stylesheet" href="/images/ionicons/css/ionicons.min.css"/>
{{--<link rel="shortcut icon" href="../CodeCogs.ico" type=”image/x-icon”>--}}
<link rel="apple-touch-icon" sizes="180x180" href="../faviconpackage/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../faviconpackage/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../faviconpackage/favicon-16x16.png">
<link rel="manifest" href="../faviconpackage/site.webmanifest">
<link rel="mask-icon" href="../faviconpackage/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
@yield("Styles")
</head>
<body>
@yield("LoadingLogo")
<!-- HEADER & NAV BAR -->
@include("integral.integralLayouts.header")
<!--SECTION ONE-->
@yield("sectionOne")
<!--SECTION TWO-->
@yield("sectionTwo")
<!--SECTION THREE-->
@yield("sectionThree")
<!-- SOCIAL PROOF -->
{{--//require_once "socialProof.php"--}}
<!-- END OF SOCIAL PROOF -->
<!-- FOOTER -->
@include("integral.integralLayouts.footer")
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Greensock%20minified/TweenMax.min.js"></script>
<script src="/js/Greensock%20minified/TimelineMax.min.js"></script>
<script src="/js/Greensock%20minified/DrawSVGPlugin.js"></script>
<script src="/js/Greensock%20minified/plugins/CSSPlugin.min.js"></script>
<script src="/js/ScrollMagic%20minified/ScrollMagic.min.js"></script>
<script src="/js/ScrollMagic%20minified/plugins/animation.gsap.min.js"></script>
<!--<script src="Scripts/ScrollMagic%20minified/plugins/debug.addIndicators.min.js"></script>-->
{{--<script src="/js/headerFooter.js"></script>--}}
<script src="/js/dropDownMenuAnimations.js"></script>
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js"></script>
<script src="/js/mobilemenu.js"></script>
<script src="/js/jsBuySDK.js"></script>
<script src="../js/app.js"></script>
<!--<script src="Scripts/socialProof.js"></script>-->
@yield("Scripts")
</body>
</html>
Routes Relevant to Journal & Archives
Route::get("/the-journal", "TheJournalController@mainJournalPage");
Route::get("/main-page-journal-articles", "TheJournalController@getMainJournalPageArticles");
Route::get("/the-journal/archives", "TheJournalController@archives");
Route::get("/the-journal/archives/list", "TheJournalController@archivesList");
Route::get("/the-journal/{article}", "TheJournalController@showArticle");
Journal Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Article;
use App\ArticleAuthor;
use App\ArticleTopic;
class TheJournalController extends Controller
{
public function mainJournalPage()
{
return view("integral.JournalMainPage");
}
public function getMainJournalPageArticles()
{
$currentYear = date("Y");
$currentMonth = date("m");
$currentYearsArticles = Article::whereYear("created_at", $currentYear);
$currentMonthsArticles = Article::whereMonth("created_at", $currentMonth)
->union($currentYearsArticles)
->latest()
->get();
return compact("currentMonthsArticles");
}
public function showArticle(Article $article)
{
return view("integral.article", compact("article"));
}
public function archives()
{
$archives = Article::getArchives();
return view("Integral.JournalArchives", compact("archives"));
}
public function archivesList()
{
$archives = Article::getArchives();
$articles = Article::latest()
->Filter(request(['month', 'year']))
->get();
return view("integral.archivesList", compact('archives', 'articles'));
}
}
Articles Model
public function scopeFilter($query, $filters)
{
if($month = $filters['month']) {
$query->whereMonth('created_at', Carbon::parse($month)->month);
}
if($year = $filters['year']) {
$query->whereYear('created_at', $year);
}
}
public static function getArchives()
{
return static::selectRaw('year(created_at) year, monthname(created_at) month, count(*) published')
->groupBy("year", "month")
->orderByRaw("min(created_at) desc")
->get();
}
Archives List Blade Template
@extends("integral.integralLayouts.master")
@section("title")The Archives
@endsection
@section("Styles")
<link type="text/css" rel="stylesheet" href="/css/archivesList.css"/>
@endsection
@section("sectionOne")
<div id="JournalContainer">
<div id="JournalsectionOne">
<div class="JournalTitles">
<p class="Journal-Subheader">Sharing our experiences to empower & inspire</p>
</div>
<div class="mainGrid">
@foreach($articles as $article)
<a href="/the-journal/{{ $article->id }}">
<img class="item" src="/images/TheJournal/{{ $article->MainPic }}">
</a>
@endforeach
</div>
</div>
</div>
@endsection
@section("Scripts")
@endsection
Error Messages in Console
GET http://127.0.0.1:8000/the-journal/js/app.js 404 (Not Found) This references the master template) This error doesn't appear on any other page even though I used the same Master template for those pages.
GET http://127.0.0.1:8000/the-journal/faviconpackage/site.webmanifest 404 (Not Found) This again references the master template.
Manifest: Line: 1, column: 1, Unexpected token. This references Laravel's "Sorry, the page you are looking for could not be found" page. Namely, this thing <DOCTYPE html> on the "Could not be found page".
Another thing that might be helpful is that when I hover over the links,
<a href="/the-journal/archives/list?month={{ $stats->month }}&year={{ $stats->year }}">
{{ $stats->month }} {{ $stats->year }}</a>
, in the Archives Page, they don't change color as I have coded them in the styles sheet for this page.
I honestly don't know what's the problem. Any help would be greatly appreciated. If you need clarification, I'd be happy to supply.
Welp, I solved the problem.
I changed
Route::get("/the-journal/archives/list", "TheJournalController@archivesList");
to
Route::get("/the-journal/archivesLists", "TheJournalController@archivesList");
But can someone explain why this solved the problem?
Please or to participate in this conversation.