vue 路由跳转 设置 title

Vue Router 跳转时设置页面标题 (Title) 可以通过以下几种方式实现：

1. **在组件内部**: 在每个需要改变标题的组件内，你可以利用 `beforeRouteUpdate` 或者 `mounted` 生命周期钩子，在数据更新之后设置 `<title>` 元素的内容。例如：

export default {
  mounted() {
    document.title = this.$route.meta.title || '默认标题';
  },
};

在这里，`$route.meta.title` 是你在路由配置中添加的一个自定义属性。

2. **全局设置**:
如果你想在整个应用中统一处理路由标题，可以在 App 组件或其他合适的地方，创建一个专门管理标题的方法，并使用 Vue 的 `$router` 对象来获取当前路由信息：

const setTitle = (to) => {
  document.title = to.meta.title || '默认标题';
};

// 在 App.vue 或其他全局地方挂载这个函数
router.beforeEach(setTitle);

3. **路由守卫**: 使用 `beforeEach` 遍历所有导航，也可以设置或更新标题：

router beforeEach((to, from, next) => {
  document.title = to.meta.title || from.meta.title || '默认标题';
  next();
});

这里假设 `meta.title` 存在于当前路由或前一个路由的元数据中。