Vue ——设置页面title标题

最新推荐文章于 2025-09-07 19:42:02 发布

原创最新推荐文章于 2025-09-07 19:42:02 发布 · 4.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html

本文讨论了在项目中如何灵活设置页面标题，包括单一标题的全局配置和不同页面个性化标题的管理。通过router配置meta属性，实现前后台页面标题的动态切换，并利用beforeEach钩子确保页面标题的一致性。

在这里插入图片描述
一个项目中如果每个页面标题都相同的话，直接在index.html中修改title标签里面的标题即可

<title>XXX后台管理</title>

如果项目中的每个页面都展示不同的标题的话，需要进行以下配置

const routes = [
  {
    path: "/login",
    component: () => import("@/views/login/Index"),
    meta: {
      public: true,
      title: "用户登录",
    },
  },
  {
    path: "/user/home",
    component: () => import("@/views/user/Home"),
    meta: {
      title: "用户中心",
    },
  },
 ]

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
});