Vue Router Cheat Sheet

// router/index.jsimport { createRouter, createWebHistory } from 'vue-router';import Home from '../views/Home.vue';import About from '../views/About.vue';const routes = [  { path: '/', name: 'home', component: Home },  { path: '/about', name: 'about', component: About },  // Lazy-loaded route, code-split into its own chunk  { path: '/settings', component: () => import('../views/Settings.vue') },];const router = createRouter({  history: createWebHistory(),  routes,});export default router;// main.jsimport { createApp } from 'vue';import App from './App.vue';import router from './router';createApp(App).use(router).mount('#app');

<!-- Declarative --><router-link to="/about">About</router-link><router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link><router-view />// Programmatic (Composition API)import { useRouter } from 'vue-router';const router = useRouter();router.push('/about');router.push({ name: 'user', params: { id: 123 } });router.replace('/login'); // no new history entryrouter.back();router.go(-1);

const routes = [  {    path: '/user/:id',    component: User,    props: true, // pass route.params as component props  },  {    path: '/users',    component: UsersLayout,    children: [      { path: '', component: UserList },      // /users      { path: ':id', component: UserDetail }, // /users/123    ],  },];

// Global guardrouter.beforeEach((to, from) => {  if (to.meta.requiresAuth && !isAuthenticated()) {    return { name: 'login', query: { redirect: to.fullPath } };  }});// Per-route guardconst routes = [  {    path: '/admin',    component: Admin,    meta: { requiresAuth: true },    beforeEnter: (to, from) => {      console.log('Entering admin area');    },  },];