How do you create links and perform programmatic navigation in TanStack Router with Vue?

TanStack Router provides <RouterLink> for declarative links and useNavigate() for programmatic navigation. Both are fully type-safe — TypeScript errors on invalid paths or missing params.

<script setup lang="ts">
import { RouterLink, RouterOutlet, useNavigate } from "@tanstack/vue-router"
const navigate=useNavigate()

async function handleLogin(creds){
  await login(creds)
  navigate({ to:"/dashboard", replace:true })
}

function openUser(id:number){
  navigate({ to:"/users/$userId", params:{userId:String(id)}, search:{tab:"profile"} })
}
</script>
<template>
  <RouterLink to="/home">Home</RouterLink>

  <RouterLink
    v-for="u in users" :key="u.id"
    :to="{ to:'/users/$userId', params:{ userId:String(u.id) } }"
    :active-props="{ class:'font-bold text-blue-600' }"
    :preload="'intent'"
  >{{ u.name }}</RouterLink>

  <RouterOutlet />
</template>