请阐述在 Vue 应用中，利用 Vue Router 根据当前路由动态更新导航栏标题的实现思路，并说明具体的步骤和关键点。

回答思路

1. 【回答框架 1】通过路由配置中的 meta 字段携带标题信息，这是 Vue Router 官方支持的路由元信息方式。例如在路由记录中设置 meta: { title: '首页' }。
2. 【回答框架 2】在导航守卫（如 beforeEach 或 afterEach）中读取 to.meta.title，并赋值给一个响应式变量（如 ref 或 reactive）。由于 Vue 的响应式系统，导航栏标题会自动更新。
3. 【回答框架 3】若标题需要根据动态参数变化，可在组件内通过 watch 监听 $route 对象，或在守卫中根据 params 动态生成标题。
4. 【回答框架 4】对于需要异步获取的标题，可在守卫中调用接口，但需要处理好加载状态，避免导航阻塞。
5. 【关键点 1】使用路由 meta 字段携带标题是实现动态标题的常见方式。
6. 【关键点 2】通过导航守卫读取 meta 并更新响应式变量，实现标题的动态切换。
7. 【关键点 3】响应式数据驱动视图更新，无需手动操作 DOM。
8. 【关键点 4】注意 beforeEach 和 afterEach 的执行时机，beforeEach 中更新标题可能延迟，适合在 afterEach 中更新。
9. 【易错点 1】在 beforeEach 中直接修改 DOM 标题可能因导航取消而无效。
10. 【易错点 2】忘记清空标题可能导致切换路由后标题残留。
11. 【易错点 3】若标题依赖异步数据，需要处理竞态条件。