如何在 Vue.js 项目中动态设置页面标题

目录

方法 1：使用 Vue Router 的元信息（meta）

步骤 1: 配置路由元信息

步骤 2: 使用路由守卫设置标题

方法 2：在组件内设置标题

在组件挂载时设置标题

使用响应式数据动态更新标题

        

---

        

在开发 Vue.js 应用时，设置动态页面标题是常见需求，尤其当应用包含多个页面时，为每个页面设置合适的标题可以提高用户体验和SEO效果。本文将介绍两种在 Vue.js 项目中设置页面标题的方法：一种是利用 Vue Router 的元信息，另一种是在 Vue 组件的生命周期钩子中设置。

方法 1：使用 Vue Router 的元信息（meta）

当使用 Vue Router 管理路由时，可以在路由配置中使用元信息来存储每个页面的标题。这种方法的优势在于集中管理，易于维护和更新。

步骤 1: 配置路由元信息

在定义路由时，为每个路由对象添加 meta 属性，并在其中定义 title。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';

Vue.use(Router);

const router = new Router({
  rout