单页应用只有一个 HTML，路由负责「URL 变了显示哪个组件」。Vue Router 的配置是一棵路由树：path（URL 路径）+ component（渲染的组件）+ children（嵌套子路由）+ redirect（重定向）。导航方式：声明式
进阶要点：动态路由（path: '/user/:id'）通过 useRoute().params 取参；路由守卫（beforeEach）统一做登录拦截；懒加载（() => import('./X.vue')）把大文件拆成按需加载的块。history 模式需要服务器对所有路径都回退到 index.html，否则刷新 404。
<!-- router/index.js --> import { createRouter, createWebHistory } from 'vue-router'; export default createRouter({ history: createWebHistory(), routes: [ { path: '/', component: () => import('../views/Home.vue') }, { path: '/user/:id', component: () => import('../views/User.vue') }, { path: '/admin', component: () => import('../views/Admin.vue'), meta: { needAuth: true } }, // 路由元信息 ], }); // main.js 全局前置守卫 router.beforeEach((to) => { if (to.meta.needAuth && !isLoggedIn()) return '/login'; // 鉴权拦截 }); <!-- 组件内 --> <template> <router-link to="/user/42">用户 42</router-link> <router-view /> <!-- 路由出口 --> </template> <script setup> import { useRoute } from 'vue-router'; const { params } = useRoute(); // params.id === '42' </script>