使用vue-router为每个路由配置各自的title

针对如何使用vue-router为每个路由配置各自的title，可以按照以下完整攻略进行操作：

1.在路由中设置meta属性

首先在路由中设置meta属性，可以定义一个meta属性，用于存储每个路由的标题，具体代码如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      title: '首页'
    }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: {
      title: '关于我们'
    }
  },
  // ...
]

如上所示，在每个路由中都定义了一个名为title的meta属性，用于存储每个路由的标题，这样就可以使用vue-router动态修改每个页面的标题信息。

2.使用全局钩子函数修改页面title

接下来，我们需要使用全局钩子函数beforeEach，在路由切换前动态修改每个页面的标题信息，具体代码如下：

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

如上所示，在全局的路由切换钩子beforeEach中，首先判断当前路由是否有定义title属性，如果有则将其设置为页面标题。

至此，通过以上两步操作，我们就成功地为每个路由配置了各自的title，当路由切换时，页面标题也会动态修改，展示出不同的页面标题信息。

3.示例说明

我们接下来举两个示例来说明如何使用vue-router为每个路由配置各自的title。

示例1：首页和关于我们两个页面的标题

我们需要为首页和关于我们两个页面分别配置各自不同的标题信息，具体示例代码如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      title: '首页'
    }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: {
      title: '关于我们'
    }
  },
  // ...
]

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

如上所示，在路由定义中分别为首页和关于我们两个页面配置了各自的title信息，并使用全局钩子函数beforeEach动态修改页面标题。

示例2：动态设置标题信息

我们有一个需求，即在路由变化时动态设置标题信息，标题格式为“当前页面名-网站名称”，具体示例代码如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      title: '首页'
    }
  },
  {
    path: '/article/:id',
    name: 'article',
    component: Article,
    meta: {
      title: '文章详情'
    }
  },
  // ...
]

router.beforeEach((to, from, next) => {
  const titleSuffix = '-My Blog' // 网站名称
  if (to.meta.title) {
    document.title = `${to.meta.title}${titleSuffix}`
  } else {
    document.title = `My Blog${titleSuffix}`
  }
  next()
})

如上所示，在路由定义中设置了首页和文章详情两个页面的title属性，并在全局的钩子函数beforeEach中动态修改页面标题，如当前路由有定义title属性，则使用该属性值作为页面标题，否则使用默认的网站名称。同时，我们还设置了一个网站名称变量titleSuffix，在页面标题后面拼接该变量，以保证标题信息的完整性。

需要注意的是，动态设置标题信息时，我们可以根据实际需求自由设置标题信息格式，让页面标题更贴近于实际应用场景。

希望以上攻略和示例能够帮助到您，祝您在使用vue-router配置页面标题时顺利完成任务。