Vue3中动态设置标题的方法

1.创建一个全局的标题管理器

可以在你的Vue3项目中创建一个全局的标题管理器。 这个管理器可以是一个Vuex store、一个Pinia store或者是一个简单的全局变量。 这里以Pinia store为例

// store/title.js
import { defineStore } from 'pinia';
 
export const useTitleStore = defineStore('title', {
  state: () => ({
    title: '默认标题'
  }),
  actions: {
    setTitle(newTitle) {
      this.title = newTitle;
      document.title = newTitle;
    }
  }
});

2.在组件中使用标题管理器

在你的组件中引入并使用这个标题管理器。比如，在一个页面组件中：

// views/HomeView.vue
<template>
  <div>
    <h1>这是首页。</h1>
  </div>
</template>
 
<script>
import { useTitleStore } from '../store/title';
 
export default {
  name: 'HomeView',
  mounted() {
    const titleStore = useTitleStore();
    titleStore.setTitle('首页 - Vue3项目');
  }
}
</script>

3.在路由守卫中设置标题

根据路由的变化来动态设置标题，在路由守卫中调用标题管理器的setTitle方法。比如，在router/index.js中：

import { createRouter, createWebHistory } from 'vue-router';
import { useTitleStore } from '../store/title';
import HomeView from '../views/HomeView.vue';
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView,
    meta: { title: '首页' }
  },
  // 其他路由...
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
 
router.beforeEach((to, from, next) => {
  const titleStore = useTitleStore();
  const title = to.meta.title || '默认标题';
  titleStore.setTitle(title);
  next();
});
 
export default router;