>  기사  >  웹 프론트엔드  >  vue.js에서 페이지 제목을 수정하는 방법

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

王林
王林원래의
2021-10-12 16:29:058662검색

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

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

이 기사의 운영 환경: 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: &#39;/&#39;,
      name: &#39;home&#39;,
      component: () => import(&#39;@/pages/home/index&#39;),
      meta:{
        title: &#39;首页&#39;,
        keepAlive: true
      }
    },
    {
      path: &#39;/person/auth,
      name: &#39;personAuth&#39;,
      component: () => import(&#39;@/pages/person/auth),
      meta:{
        title: &#39;个人中心&#39;,
        keepAlive: false
      }
    }
  ]

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

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

권장 학습: php training

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.