Vue-Router企业开发中常用的属性和方法总结

在 Vue Router 的开发中router(路由器实例) 和route(当前活跃的路由对象) 是两个最核心的概念。为了方便记忆我们可以将它们分为全局路由实例 (router)和当前路由对象 (route)两部分。一、 全局路由实例 (router)这是通过useRouter()获取的实例它是整个应用的“导航控制器”。常用方法router.push(to): 添加一个新的历史记录并跳转。router.replace(to): 替换当前的记录不会产生返回历史常用于登录页跳转回首页。router.go(n): 在历史记录中前进或后退如router.go(-1)等同于浏览器后退。router.back(): 等同于router.go(-1)后退一步。router.forward(): 等同于router.go(1)前进一步。router.resolve(to):高频解析路由路径常用于获取完整 URL如新窗口打开。router.addRoute(route): 动态添加路由常用于权限控制即后端返回菜单权限后动态挂载。router.removeRoute(name): 动态删除路由。router.getRoutes(): 获取当前所有的路由记录配置。router.beforeEach(to, from, next):全局前置守卫用于权限校验。router.afterEach(to, from): 全局后置钩子。二、 当前路由对象 (route)这是通过useRoute()获取的对象它是一个响应式对象包含当前页面的一切信息。常用属性route.path: 当前路由的路径例如/user/123。route.name: 路由的名称在路由配置中定义的name。route.params: 路由参数配合动态路径使用如/user/:id则获取{id: 123}。route.query: URL 参数即?id123部分获取{id: 123}。route.fullPath: 包含 query 和 hash 的完整路径。route.meta: 路由元信息在路由配置中定义的meta字段常用于存储页面权限、标题等。route.hash: 当前路由的 hash 值如#anchor。三、 总结对比表特性router (实例)route (对象)角色执行者跳转、控制信息拥有者获取参数、状态来源useRouter()useRoute()主要功能跳转、添加守卫、动态路由读取路径、获取参数、读取 meta开发小贴士关于paramsvsquery:params类似于 Post 请求或隐藏参数依赖于路由配置中的路径匹配如/user/:id。如果刷新页面params 可能会丢失取决于版本和配置。query类似于 Get 请求明文展示在 URL 中如?id1刷新页面数据依然存在。权限处理: 绝大多数复杂的权限需求都是通过router.addRoute配合router.beforeEach来实现的。响应式注意:route对象是响应式的你可以直接使用watch监听route.params或route.query的变化从而在同一个组件中切换 ID 时自动更新数据。你目前在开发中是否遇到了需要动态添加路由或者处理复杂权限拦截的场景