如何在Vue项目中添加动态浏览器头部标题 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关如何在Vue项目中添加动态浏览器头部,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

0。直接上预览链接+效果图

Vue项目添加动态浏览器头部标题

1。实现思路

(1)从路由路由器里面得到组件的标题

(2)标题存vuex(本项目已经封装类推的sessionStorage和localStorage也可以存在这里面)

(3)设置标题

<强>(1)从路由路由器里面得到组件的标题

在<代码>路由器。beforeEach(下),从=比;{}里面

const browserHeaderTitle =, to.name

<强>(2)标题存vuex

, SET_BROWSERHEADERTITLE:,(状态,行动),=祝辞,{ 　　state.browserHeaderTitle 才能=action.browserHeaderTitle 　　,} 　　　　,store.commit (& # 39; SET_BROWSERHEADERTITLE& # 39;,, { 　　browserHeaderTitle才能:browserHeaderTitle 　　之前,})

<强>(3)设置标题

我们在路后由后设置标题

/* * 　　,*设置浏览器头部标题　　,*/时间=export const setTitle 函数(标题),{=,,title title ?,“${标题}”,:,& # 39;NxAdmin& # 39; 　　window.document.title =,标题　　} 　　　　router.afterEach((),=祝辞,{ 　　,NProgress.done(),//,结束进步　　,setTimeout((),=祝辞,{ 　　,const browserHeaderTitle =store.getters.browserHeaderTitle 　　,setTitle (browserHeaderTitle) 　　,},0) 　　})

关于如何在Vue项目中添加动态浏览器头部标题就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。