How does Vue Router work?

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/about', component: () => import('./views/About.vue') },
  { path: '/user/:id', component: () => import('./views/User.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<template>
  <!-- Declarative -->
  <router-link to="/">Home</router-link>
  <router-link :to="{ name: 'user', params: { id: 1 }}">User</router-link>

  <!-- Route view -->
  <router-view />
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// Programmatic
function goToUser(id) {
  router.push(`/user/${id}`)
}

// Access params
console.log(route.params.id)
</script>

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return '/login'
  }
})