vue单页面添加标题

原创于 2024-04-15 15:12:25 发布 · 607 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端

本文介绍了如何在Vue项目中为每个页面设置全局和单个页面的标题，包括通过router的meta配置和使用路由守卫beforeRouteEnter实现。着重讲解了如何在路由拦截和刷新页面时确保标题显示正确。

1.vue整体添加页面标题时

在项目中每个页面都需要标题时需要再router中路径跳转中添加meta

[{
    path: '/home',
    name: 'home',
     meta: { title: "测试 },
    component: () => import(`@/views/index.vue`)
  },]

在路由拦截和路由响应的js中书写路由守卫 beforeRouteEnter,判断跳转的页面和需要的标题


// 全局路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
  // 用即将前往的页面的 标题 作为 标签的标题`在这里插入代码片`
  document.title = to.meta.title
  }
  // 触发next 路由才能继续进行
  next()
  })

2.单个页面需要标题(单个页面里面使用全局路由守卫)

进入需要标题的vue页面,然后在export default中书写如下代码(vue2),vue3直接书写

  beforeRouteEnter(to, from, next) {
    document.title = '标题'
    next()
  },

刷新页面,页面标题就有了