子任务二：标题栏设计.pptxVIP

子任务二：标题栏设计

任务陈述《Vue前端框架开发》路由元信息配置在路由规则中通过meta字段定义各页面标题全局路由守卫拦截利用beforeEach统一拦截路由，动态设置文档标题组件内路由信息获取使用useRouter()钩子获取当前路由信息并展示本任务要求基于VueRouter的路由守卫与Vue3的组合式API，实现一个动态显示的标题栏组件，具体功能要求如下：页面效果

任务实施

任务实施《Vue前端框架开发》步骤一：配置路由元信息与全局守卫全局路由守卫(beforeEach)router.beforeEach((to,from,next)={if(to.meta.title){document.title=to.meta.title}returnnext()})路由规则配置(MetaInfo){path:/home,name:home,meta:{title:职通车},component:()=import(@/pages/home.vue)}核心逻辑说明：1.**全局守卫**：在`src/router/index.js`中注册`beforeEach`，它会拦截所有路由跳转。2.**动态设置**：在守卫回调中，判断目标路由`to`是否包含`meta.title`，若有则更新`document.title`。

任务实施《V