vue单页面添加标题

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()
  },

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