Web / TanStack Interview Questions
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>
More Related questions...