Vue ——设置页面title标题

最新推荐文章于 2024-04-15 15:12:25 发布

贝塔贝卡贝

最新推荐文章于 2024-04-15 15:12:25 发布

阅读量4.1k

点赞数 1

文章标签： vue.js html

本文链接：https://blog.csdn.net/Kiruthika/article/details/120716176

版权

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

摘要由CSDN通过智能技术生成

在这里插入图片描述
一个项目中如果每个页面标题都相同的话，直接在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
  }
});