vue中title标题

在Vue中设置页面标题可以通过两种方式：使用Vue Router和直接操作文档对象。

1. 使用Vue Router：
在Vue Router中，可以在路由配置中设置页面的标题。首先，确保安装了Vue Router，并在Vue应用中引入和使用它。然后，在每个路由对象的meta字段中添加一个名为title的属性，该属性将作为页面标题。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta: {
        title: '首页' // 设置页面标题为"首页"
      }
    },
    // 其他路由配置...
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title; // 将页面标题设置为路由对象的meta字段中的title属性
  }
  next();
})

在上面的例子中，每次切换路由时，路由钩子函数beforeEach会被调用。在该钩子函数中，可以通过to.meta.title获取当前路由对象的标题，并将其赋值给document.title，从而改变页面的标题。

2. 直接操作文档对象：
如果不使用Vue Router，也可以直接操作文档对象来设置页面标题。在Vue组件的生命周期钩子函数中，通过修改document.title来改变页面的标题。例如，在组件的created钩子函数中设置页面标题：

export default {
  created() {
    document.title = '页面标题'; // 设置页面标题为"页面标题"
  }
  // 其他组件配置...
}

以上是两种常用的设置Vue页面标题的方式。根据你的实际情况选择适合的方式来设置页面标题。