vue-preload-router-link

vue-router RouterLink with preload.

Install

npm install vue-preload-router-link

Usage

use PreloadRouterLink instead of RouterLink

<template>
  <PreloadRouterLink to="/dashboard" prefetch>Dashboard</PreloadRouterLink>
</template>

<script setup>
import PreloadRouterLink from 'vue-preload-router-link'
</script>

use preloadRouteComponents to manual preload page

<template>
  <RouterLink to="/dashboard">Dashboard</RouterLink>
  <button @click="preloadDashboard">preload dashboard page</button>
</template>

<script setup>
import { preloadRouteComponents } from 'vue-preload-router-link'
import { useRouter } from 'vue-router'

// preload dashboard page in top level
preloadRouteComponents('/dashboard')

// preload dashboard page in function
const router = useRouter()
function preloadDashboard() {
  preloadRouteComponents('/dashboard', router)
}
</script>

Props

see PreloadRouterLinkProps