Vue项目添加动态浏览器头部title的方法
程序员文章站
2022-07-21 20:16:23
0. 直接上 预览链接 + 效果图
vue项目添加动态浏览器头部title
1. 实现思路
( 1 ) 从路由router里面得到组件的title
( 2...
0. 直接上 预览链接 + 效果图
1. 实现思路
( 1 ) 从路由router里面得到组件的title
( 2 ) title存vuex (本项目已经封装h5的sessionstorage和localstorage也可以存在这里面)
( 3 ) 设置 title
(1)从路由router里面得到组件的title
在 router.beforeeach((to, from, next) => {}
里面
const browserheadertitle = to.name
( 2 ) title存vuex
set_browserheadertitle: (state, action) => { state.browserheadertitle = action.browserheadertitle } store.commit('set_browserheadertitle', { browserheadertitle: browserheadertitle })
( 3 ) 设置 title
我们在路由after后设置title
/** * 设置浏览器头部标题 */ 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) })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 守候情缘