Vue项目添加动态浏览器头部title的方法

在Vue项目中，动态设置浏览器头部标题是一个常见的需求。长沙网络推广团队提供了一个非常实用的解决方案，下面让我们一起跟随其步伐，了解如何实现动态浏览器头部title的添加。

预览链接和效果图的展示让我们对这个功能有一个初步的认识。接下来，我们深入了解实现的思路。

一、获取组件的标题

我们可以从路由（router）中获取到当前组件的标题，即在路由切换的时候获取到即将进入的组件的name属性，这个name就是我们需要的标题。我们可以在router的beforeEach钩子函数中获取这个值。

二、存储标题

获取到的标题需要存储起来，以便后续使用。我们可以选择将标题存入vuex（本项目已经封装了h5的sessionStorage和localStorage，也可以存在这里）。在vuex中定义一个状态来存储标题，并通过一个action来设置这个状态。

三、设置标题

存储了标题之后，我们需要在合适的地方设置浏览器的标题。在路由after切换完成之后，我们设置浏览器的头部标题。这里我们使用了一个setTitle函数来设置标题，这个函数接受一个参数title，如果传入了title，就使用传入的title作为浏览器标题，否则使用默认的'NxAdmin'作为浏览器标题。设置浏览器标题的代码放在setTimeout中是为了确保在路由切换完成之后立即设置浏览器标题。

以下是具体的代码实现：

获取组件的标题：

在router的beforeEach钩子函数中：

```javascript

const browserHeaderTitle = to.name;

```

存储标题：

在vuex中定义一个状态来存储标题，并定义一个action来设置这个状态：

```javascript

SET_BROWSERHEADERTITLE: (state, action) => {

state.browserHeaderTitle = action.browserHeaderTitle;

}

storemit('SET_BROWSERHEADERTITLE', { browserHeaderTitle });

```

设置标题：

在路由after切换完成之后：

```javascript

export const setTitle = function(title) {

title = title ? `${title}` : 'NxAdmin';

window.document.title = title;

}

router.afterEach(() => {

NProgress.done(); // 结束Progress

setTimeout(() => {

const browserHeaderTitle = store.getters.browserHeaderTitle;

setTitle(browserHeaderTitle);

}, 0);

});

```

以上就是动态设置Vue项目浏览器头部标题的全部内容。这个方案既简单又实用，相信对大家的学习会有所帮助。也希望大家能够支持长沙网络推广团队的工作。