How to add dynamic browser header title to Vue project

This article mainly introduces the issue of how to add a dynamic browser header title in the Vue project. It has a certain reference value. Now I share it with you. Friends in need can refer to it

0 . Directly upload the preview link rendering

Vue project to add a dynamic browser header title

• ( 1 ) Get the component’s title from the routing router

• ( 2 ) Save the title in vuex (this project has encapsulated h5’s sessionStorage and localStorage can also be stored here)

• (3) Set title

of the component from the routing router

router.beforeEach((to, from, next) => {} Inside

const browserHeaderTitle = to.name

 SET_BROWSERHEADERTITLE: (state, action) => {
      state.browserHeaderTitle = action.browserHeaderTitle
    }

 store.commit('SET_BROWSERHEADERTITLE', {
      browserHeaderTitle: browserHeaderTitle
    })

Copy after login

/**
 * 设置浏览器头部标题
 */
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)
})

How to solve the problem that the mui-silder plug-in in vue mui is invalid and cannot be dragged

How to make vue The axios component and PHP backend exchange data

The above is the detailed content of How to add dynamic browser header title to Vue project. For more information, please follow other related articles on the PHP Chinese website!