The Link Component and Programmatic Linking

In this lesson, we'll explore Inertia's Link component and its props. We'll then examine how to link between pages programmatically using Inertia's router.

Published
Aug 27, 24
Duration
8m 32s

Developer & dog lover. I teach AdonisJS, a full-featured Node.js framework, at Adocasts where I publish weekly lessons. Professionally, I work with JavaScript, .NET, and SQL Server.

Adocasts

Burlington, KY

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

⏳ Chapters

00:00 - Replace History State
01:15 - POST, PUT, PATCH, and DELETE Actions
03:00 - Preserving Scroll Position
04:08 - Specifying the Link Element
04:42 - Programmatic Linking with Inertia's Router
07:17 - Cleaning Up

Join The Discussion! (2 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 7 days ago

    How can I make use of route identifiers ? Especially for programmatic linking.

    1

    Please sign in or sign up for free to reply

    1. Commented 7 days ago

      Hi Jean!

      You can achieve that by using Tuyua! From it's documentation, once installed & configured it'll allow template & programmatic linking using route identifiers like the below:

      <script setup lang="ts">
      import { Link, useRouter } from '@tuyau/inertia/vue'
      
      const router = useRouter()
      
      function visit() {
        router.visit('users.posts.show', { id: 1, postId: 2 })
      }
      </script>
      
      <template>
        <div>
          <Link route="users.posts.show" :params="{ id: 1, postId: 2 }">Go to post</Link>
          <button type="button" @click="visit">Go to posts</button>
        </div>
      </template>
      Copied!
      • inertia
      • pages
      • Home.vue
      1

      Please sign in or sign up for free to reply