vue.js에서 페이지 제목을 수정하는 방법

vue.js에서 페이지 제목을 수정하는 방법: 1. 라우팅 파일 index.js의 필수 경로에 제목을 추가합니다. 2. 경로의 beforeEach 인터셉터에서 처리합니다.

이 기사의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터.

웹페이지를 열 때 웹페이지에는 기본 제목이 있습니다. 다른 페이지 콘텐츠를 로드하면 홈페이지에서 세부정보 페이지로, 세부정보 페이지에서 개인 센터로 제목을 변경해야 합니다. 등.

vue에는 웹페이지 제목을 수정하는 데 도움이 되는 여러 가지 방법이 있습니다. 여기서는 두 가지 옵션을 소개하겠습니다.

옵션 1(권장하지 않음):

비즈니스와 결합하여 생성된 Vue 라이프사이클 함수에서 document.title에 값을 직접 할당합니다.

<script>
import axios from &#39;axios&#39;
export default {
  created () {
    document.title = &#39;功能授权&#39;
  }
}
</script>

옵션 2는 Vue-Router의 beforeEach 차단을 사용합니다

Vue Router는 프로젝트에서 사용되며 라우팅 파일 index.js의 필수 경로에 제목이 추가됩니다.

routes: [{
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/index'),
      meta:{
        title: '首页',
        keepAlive: true
      }
    },
    {
      path: '/person/auth,
      name: 'personAuth',
      component: () => import('@/pages/person/auth),
      meta:{
        title: '个人中心',
        keepAlive: false
      }
    }
  ]

경로의 각 인터셉터 이전에 처리

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

권장 학습: php training

위 내용은 vue.js에서 페이지 제목을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!