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

Continue with Vue.js

Save the full cheat sheet or work through every related task.

More Vue.js tasks

Back to the full Vue.js cheat sheet