Vue 프로젝트에 동적 브라우저 헤더 제목을 추가하는 방법

이 글에서는 Vue 프로젝트에 동적 브라우저 헤더 제목을 추가하는 방법에 대한 문제를 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 🎜 🎜#0. 미리보기 링크 + 렌더링으로 바로 이동

Vue 프로젝트에 동적 브라우저 헤더 제목 추가

#🎜 🎜#

1. 구현 아이디어

( 1 ) 라우팅 라우터에서 구성 요소 제목 가져오기

#🎜🎜 ## 🎜🎜#
• ( 2 ) 제목은 vuex에 저장됩니다(이 프로젝트는 h5 sessionStorage를 캡슐화했으며 localStorage도 여기에 저장할 수 있습니다)

• ( 3 ) 제목 설정

• (1)

  const browserHeaderTitle = to.name

  의 라우팅 라우터

에서 구성 요소의 제목을 가져옵니다.

(2) 제목은 vuex

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

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

(3) 제목 설정router.beforeEach((to, from, next) => {}

라우팅 후 제목

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

을 설정합니다. 이상이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장사항:

vue+mui의 mui-silder 플러그인이 실패하고 드래그할 수 없는 문제를 해결하는 방법

# 🎜🎜##🎜 🎜#

vue의 axios 구성 요소와 PHP 백엔드가 데이터를 교환하도록 하는 방법

위 내용은 Vue 프로젝트에 동적 브라우저 헤더 제목을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!