文章目录前言一、Vue Router 4 基本配置1.1 创建路由1.2 与 Vue Router 3 的主要变化二、历史模式2.1 三种模式2.2 History vs Hash三、useRouter 与 useRoute3.1 useRouter编程式导航3.2 useRoute当前路由信息3.3 与 Options API 对照四、route 对象的响应性4.1 Vue Router 4 的响应性4.2 模板中直接使用4.3 易混淆点五、路由配置5.1 动态路由5.2 嵌套路由5.3 路由 meta 元信息5.4 命名视图六、声明式导航6.1 router-link七、面试聚焦7.1 route.params 和 route.query 的响应性7.2 History 与 Hash 模式区别7.3 useRouter vs useRoute八、易混淆点九、思考与练习总结前言Vue Router 4 是 Vue 3 的官方路由库全面拥抱 Composition API。本篇会讲清楚Vue Router 4 的基本配置useRouter/useRoute组合式 APIroute 对象的响应性历史模式与导航方式一、Vue Router 4 基本配置1.1 创建路由// router/index.jsimport{createRouter,createWebHistory}fromvue-routerimportHomefrom/views/Home.vueconstroutes[{path:/,name:Home,component:Home},{path:/about,name:About,component:()import(/views/About.vue)},{path:/user/:id,name:User,component:()import(/views/User.vue)}]constroutercreateRouter({history:createWebHistory(),// HTML5 History 模式routes})exportdefaultrouter// main.jsimport{createApp}fromvueimportAppfrom./App.vueimportrouterfrom./routercreateApp(App).use(router).mount(#app)1.2 与 Vue Router 3 的主要变化对比项Vue Router 3Vue Router 4创建方式new VueRouter()createRouter()历史模式mode: historycreateWebHistory()组件 APIthis.$router/this.$routeuseRouter()/useRoute()导航控制next()回调return值Vue 版本Vue 2Vue 3二、历史模式2.1 三种模式import{createWebHistory,// HTML5 HistorycreateWebHashHistory,// Hash 模式createMemoryHistory// 内存模式SSR/测试}fromvue-router// 1. History 模式推荐URL 无 #createRouter({history:createWebHistory(),routes})// URL: https://example.com/user/1// 2. Hash 模式兼容性好URL 带 #createRouter({history:createWebHashHistory(),routes})// URL: https://example.com/#/user/1// 3. Memory 模式无浏览器地址栏用于 SSRcreateRouter({history:createMemoryHistory(),routes})2.2 History vs Hash对比项HistoryHashURL/user/1/#/user/1服务端配置需要 fallback 到 index.html不需要SEO更好较差兼容性需服务端支持全兼容# Nginx History 模式配置 location / { try_files $uri $uri/ /index.html; }三、useRouter 与 useRoute3.1 useRouter编程式导航script setup import { useRouter } from vue-router const router useRouter() // 跳转到路径 const goHome () router.push(/) // 跳转到命名路由 const goUser () router.push({ name: User, params: { id: 1 } }) // 带 query const goSearch () router.push({ path: /search, query: { q: vue } }) // 替换当前历史记录不可后退 const replaceLogin () router.replace(/login) // 前进 / 后退 const goBack () router.back() const goForward () router.forward() const goSteps () router.go(-2) /script3.2 useRoute当前路由信息script setup import { useRoute } from vue-router const route useRoute() // 访问路由信息 console.log(route.path) // /user/1 console.log(route.params) // { id: 1 } console.log(route.query) // { tab: profile } console.log(route.meta) // { title: 用户详情, auth: true } console.log(route.name) // User /script template div p用户 ID{{ route.params.id }}/p pTab{{ route.query.tab }}/p /div /template3.3 与 Options API 对照// Options APIthis.$router.push(/about)this.$route.params.id// Composition APIconstrouteruseRouter()constrouteuseRoute()router.push(/about)route.params.id四、route 对象的响应性4.1 Vue Router 4 的响应性script setup import { watch } from vue import { useRoute } from vue-router const route useRoute() // route 是响应式对象params/query 变化会自动更新 watch( () route.params.id, (newId) { fetchUserDetail(newId) } ) // 监听 query 变化 watch( () route.query.tab, (tab) { loadTabContent(tab) } ) /script4.2 模板中直接使用template !-- route 在模板中自动解包无需 .value -- h1{{ route.params.id }}/h1 p{{ route.query.keyword }}/p /template4.3 易混淆点// ✅ route 整体是响应式的constrouteuseRoute()watch(()route.params.id,handler)// ⚠️ 解构会失去响应性与 props 类似const{id}route.params// id 不是响应式的// ✅ 用 toRef 保持响应性import{toRef}fromvueconstidtoRef(()route.params.id)// 或constidcomputed(()route.params.id)五、路由配置5.1 动态路由constroutes[// 动态参数{path:/user/:id,component:User},// 可选参数?{path:/user/:id?,component:User},// 多个参数{path:/post/:category/:id,component:Post},// 正则限制{path:/user/:id(\\d),component:User}// id 必须是数字]5.2 嵌套路由constroutes[{path:/user/:id,component:UserLayout,children:[{path:,component:UserProfile},// /user/1{path:posts,component:UserPosts},// /user/1/posts{path:settings,component:UserSettings}// /user/1/settings]}]!-- UserLayout.vue -- template div nav.../nav router-view / !-- 子路由渲染位置 -- /div /template5.3 路由 meta 元信息constroutes[{path:/admin,component:Admin,meta:{title:管理后台,auth:true,roles:[admin]}}]// 组件或守卫中使用if(route.meta.auth){/* 需要登录 */}document.titleroute.meta.title5.4 命名视图!-- 同时渲染多个 router-view -- template router-view namesidebar / router-view / !-- 默认 namedefault -- /template{path:/settings,components:{default:SettingsMain,sidebar:SettingsSidebar}}六、声明式导航6.1 router-linktemplate !-- 基本用法 -- router-link to/首页/router-link !-- 命名路由 -- router-link :to{ name: User, params: { id: 1 } }用户/router-link !-- 带 query -- router-link :to{ path: /search, query: { q: vue } }搜索/router-link !-- 自定义激活类名 -- router-link to/about active-classactive exact-active-classexact-active 关于 /router-link !-- 渲染为其他标签 -- router-link to/home custom v-slot{ navigate, isActive } button clicknavigate :class{ active: isActive }首页/button /router-link /template七、面试聚焦7.1 route.params 和 route.query 的响应性// Vue Router 4 中 useRoute() 返回的 route 是响应式对象// params/query 变化时依赖它们的 computed/watch 会自动更新constrouteuseRoute()watch(()route.params.id,fetchDetail)7.2 History 与 Hash 模式区别// HistoryURL 无 #需服务端配置SEO 更好// HashURL 带 #无需服务端配置兼容性好7.3 useRouter vs useRoute// useRouter路由器实例用于 push/replace/back 等导航操作// useRoute当前路由信息只读用于读取 path/params/query/meta八、易混淆点useRouter vs useRoute前者是路由器导航后者是当前路由信息只读。解构 route.params 失去响应性需用computed或toRef保持响应性。History 模式需服务端配置所有路径 fallback 到 index.html否则刷新 404。params vs queryparams 是路径一部分/user/:idquery 是查询字符串?tab1。router-link 的 to可以是字符串路径或{ name, params, query }对象。九、思考与练习1.Vue Router 4 如何创建路由解析使用createRouter({ history: createWebHistory(), routes })在 main.js 中app.use(router)。2.useRouter 和 useRoute 的区别解析useRouter路由器实例用于push、replace、back等导航useRoute当前激活路由的信息对象读取params、query、meta3.route.params 是响应式的吗解析是。useRoute()返回的 route 是响应式对象params/query 变化会触发依赖更新。但解构route.params.id会失去响应性。4.History 模式和 Hash 模式如何选择解析History现代项目首选URL 美观需 Nginx 等配置 fallbackHash无需服务端配置适合静态部署或老项目5.如何监听路由参数变化重新加载数据constrouteuseRoute()watch(()route.params.id,(id){fetchDetail(id)})总结Vue Router 4createRoutercreateWebHistory全面支持 Composition APIuseRouter编程式导航push、replace、backuseRoute当前路由信息path、params、query、meta响应性route 是响应式对象解构 params 需用 computed/toRef历史模式History推荐vs Hash兼容
