vue3 中路由 vue-router 的使用

理解 createRouter、createWebHistory组合式 API 中的 useRoute、useRouter的使用createRouter 的作用功能创建一个 Vue Router 实例管理应用的路由跳转、历史记录、导航守卫等。参数接收一个配置对象核心属性history路由模式必填决定 URL 的表现形式及底层依赖的浏览器 API。routes路由规则数组{ path, component, ... }。createWebHistory 的作用功能创建 HTML5 History 模式 的路由历史对象。URL 表现没有 # 符号形如 example.com/user/profile。组合式 API 中的路由访问useRoute 与 useRouter在 Vue 3 的 script setup 或普通 setup() 中不再有 this.$route 和 this.$router而是通过两个组合函数获取useRoute()和useRouter()1. useRouter()返回路由器实例即 createRouter 创建的那个对象。主要用途执行编程式导航例如tsconst router useRouter()router.push(/about)router.replace(/home)router.go(-1)router.back()也提供添加/移除全局守卫、获取当前路由列表等全局能力。2、useRoute()返回当前路由对象描述当前激活的路由状态。主要属性route.path当前路径字符串。route.params动态路由参数如 /user/:id 中的 id。route.query查询参数对象如 ?page2sortasc 解析为 { page: 2, sort: asc }。route.hashURL 中的 hash 部分#section。route.fullPath包含查询和 hash 的完整 URL。route.matched匹配到的路由记录数组。特性响应式 – 当路由发生变化例如参数改变useRoute() 返回的对象会触发更新组件模板中依赖它的部分会自动重新渲染。3. 关键区别函数 返回内容 典型使用场景useRouter 路由器实例 跳转、守卫、路由注册等全局操作useRoute 当前路由状态 读取参数、查询、路径等当前信息示例访问 URL route.params route.query/product/books/electronics/11 { category: electronics, id: 11 } {}/product/books/166?namelili { category: books, id: 166 } { name: lili }/product/books/166?nameliliage21 { category: books, id: 166 } { name: lili, age: 21 }// router文件 index.ts import { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(), // 指定路由模式 routes: [ // 路由配置 { path: /, name: home, component: () import(../views/HomeView.vue), }, { path: /user, name: user, component: () import(../views/UserView.vue), }, { path: /product/books/:category/:id, // route.params (参数 category、id) name: productBooks, component: () import(../views/ProductBooks.vue), }, ] }) // ProductBooks.vue script setup langts import { ref, toRefs } from vue; import { useRouter, useRoute } from vue-router; const router useRouter(); const route useRoute(); // 读取当前路由参数 console.log(route, route.params, route.query) // 编程式导航 function goToUser() { router.push({ name:user, query: {name: lili, age: 21} }) } /script template div classmain button clickgoToUser跳转到User页面/button /div /template