使用vue-router设置每个页面的title方法
在 Vue 项目中，如何设置每个页面的 title 是一个非常重要的问题。使用 vue-router，可以轻松地实现设置每个页面的 title。下面我们将详细介绍如何使用 vue-router 设置每个页面的 title。
在使用 vue-router 之前，需要先安装 vue-router 并将其引入项目中。安装完成后，需要在 router 文件夹下的 index.js 文件中配置路由。
在配置路由时，可以在每个路由中添加 meta 属性，用于设置当前页面的 title。例如：
```javascript
routes: [
{
path: '/',
name: 'Entrance',
component: Entrance,
meta: {
title: '首页入口'
}
},
{
path: '/modifyName/:nickName',
name: 'modifyName',
component: modifyName,
meta: {
title: '修改昵称'
}
},
{
path: '/goodsDetail',
name: 'goodsDetail',
component: goodsDetail,
meta: {
title: '商品详情'
}
},
{
path: '*',
component: NotFound,
meta: {
title: '找不到页面'
}
}
]
```
在上面的代码中，我们可以看到，每个路由都添加了 meta 属性，其中 title 就是当前页面的 title。
接下来，我们需要在 router.beforeEach 中添加一个钩子函数，用于在路由变化时更新页面的 title。例如：
```javascript
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
```
在上面的代码中，我们使用 router.beforeEach 添加了一个钩子函数，该函数将在路由变化时执行。在该函数中，我们首先判断当前路由是否存在 meta.title 属性，如果存在，则将其赋值给 document.title，以更新当前页面的 title。
这样，我们就可以使用 vue-router 设置每个页面的 title。无论是在开发中还是在生产环境中，这都是一个非常有用的功能。
同时，使用 vue-router 设置每个页面的 title 还可以提高搜索引擎优化（SEO）。搜索引擎通常都会抓取网页的 title，以便更好地了解网页的内容。如果我们的网页的 title 不同于其他网页，这将有助于提高我们的网页在搜索引擎中的排名。
使用 vue-router 设置每个页面的 title 是非常重要的。这不仅可以提高用户体验，还可以提高搜索引擎优化。
