Navigation in Vue.js

From the Vue.js cheat sheet · Vue Router · verified Jul 2026

Navigation

Navigating between routes

vue
<!-- Template navigation -->
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}">
  User
</router-link>

<!-- Programmatic navigation -->
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

router.push('/about')
router.push({ name: 'user', params: { id: 123 }})
</script>
💡 router-link renders as <a> tag with proper href
⚡ Use named routes to avoid hardcoding paths
📌 router.push adds to history, router.replace doesn't
🔥 Route params are strings, parse numbers when needed

More Vue.js tasks

Back to the full Vue.js cheat sheet