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. Implementation ideas

• ( 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

(1) Get the title

of the component from the routing router

In

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

const browserHeaderTitle = to.name

(2) Title is saved in vuex

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

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

(3) Set title

We set title after routing

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

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!