New "About" Page with Links Menu

Now, let's talk about links in Inertia. What do I mean by links?Currently, we only have the list of posts. Let's create another static page: for example, "About us". We will create two links above the table to link between the pages, and you will see the benefit of Inertia in terms of the SPA functionality.

Creating a Page

First, let's create a new Vue component and add some text.

There are no Artisan commands to create Vue components. You have to do that manually.

resources/js/Pages/About.vue:

<template>
    <div>About us</div>
</template>

Because this page is static, we can define Route similar to how we would do if defining Route only for a view.

routes/web.php:

Route::view('/', 'dashboard')->name('dashboard');
 
Route::get('posts', [PostController::class, 'index']);
Route::inertia('about', 'About')->name('about'); 

And now, when we visit the /about page, we can see the text from About Vue component.

Adding Links

Now, let's add the links.

resources/js/Posts/Index.vue:

// ...
 
<template>
    <div class="mb-4"> 
        <a class="mr-2" href="/posts">Posts</a>
        <a href="/about">About</a>
    </div> 
 
    <table class="min-w-full divide-y divide-gray-200 border">
 
// ...

But, after clicking on the About in the Network tab, we can see that the page was fully reloaded with all the assets, which isn't SPA.

Instead of using a tag we must use...