Vue 라우터로 페이지 파비콘 + 제목을 변경하는 방법

서커스 4

vue / vue-router로 탭 아이콘 + 제목을 변경하는 방법을 찾고 있습니다.

내가 홈페이지에있을 때 회사의 로고 파비콘과 제목을 원하고 다른 페이지에는 다른 파비콘 + 제목을 원합니다.

어떻게 할 수 있습니까?

메타 : {title : 'company name'}을 라우터에 추가하려고했지만 작동하지 않습니다.

체가 제압

'meta'태그를 추가하는 것 외에도이 태그 내에서 데이터를 수신하고 필요한 수정 사항을 적용하는 메서드를 만들어야합니다.

  1. 위에서했던 것처럼 'meta'태그를 추가하고 'icon'속성도 추가합니다.

    {
     path: "/login",
     name: "Login",
     component: LoginComponent,
     meta: {
       title: "Login",
       icon:"/lock.png" 
     }
    }
    
  2. 다양한 구성 요소가 라우팅 될 기본 * .vue 파일로 이동합니다. 이 파일은 내부에 요소가있는 파일입니다. 여기 에 파일의 스크립트 섹션에 $ route 감시자를 추가 합니다.

    watch: {
      $route(to) {
         document.title = `APPLICATION_NAME - ${to.meta.title}`;
         const link = document.querySelector("[rel='icon']")
         link.setAttribute('href',to.meta.icon)
      }
    }
    

APPLICATION_NAME을 앱 이름으로 바꾸면됩니다.

코드는 자명합니다. 기본적인 DOM 조작 일뿐입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

변수가 정의되지 않은 경우 파이프 라인을 정상적으로 실패하는 방법

분류에서Dev

Oracle Apex 19.2 로그인 페이지에서 앱 아이콘 색상을 변경하는 방법

분류에서Dev

vue js html 페이지를 pdf로 변환하는 방법

분류에서Dev

jquery를 사용하여 페이지가로드 된 후 아이콘의 색상을 변경하는 방법

분류에서Dev

Vue 라우터 링크를 사용하는 Vuetify 버튼으로 회색 배경을 방지하는 방법은 무엇입니까?

분류에서Dev

WP-페이지 ID에 따라 페이지 제목을 변경하는 방법

분류에서Dev

(vue 라우터) 거의 동일한 뷰로 두 개의 경로를 만들 때 코드를 복제하지 않는 깔끔한 방법이 있습니까?

분류에서Dev

(vue 라우터) 거의 동일한 뷰로 두 개의 경로를 만들 때 코드를 복제하지 않는 깔끔한 방법이 있습니까?

분류에서Dev

내비게이션 바에서 페이지 제목을 변경하는 방법

분류에서Dev

라우터 이름을 통해 vue-router로 Vuetify 탭을 사용하는 방법

분류에서Dev

파비콘 아이콘의 테두리 반경을 변경하는 방법이 있습니까?

분류에서Dev

Vue 라우터 : 동적 경로에 대한 페이지 제목을 동적으로 생성하는 방법은 무엇입니까?

분류에서Dev

Magento 홈 페이지 제품 이동 경로 경로를 변경하는 방법

분류에서Dev

파일이 포함 된 파일 이름을 에코하는 방법 [실행중인 파일에 따라 페이지 제목 변경]

분류에서Dev

asp.net의 콘텐츠 페이지에서 마스터 페이지의 JS 파일을 비활성화하는 방법

분류에서Dev

AngularJS로 페이지 제목을 설정하는 방법

분류에서Dev

파비콘을 강제로 표시하는 방법

분류에서Dev

페이지 제목을 Openui5로 설정하는 방법

분류에서Dev

데이터 목록 제어에 페이지 지정을 적용하는 방법

분류에서Dev

우분투에서 드라이브 / 파티션 아이콘을 변경하는 방법은 무엇입니까?

분류에서Dev

.jar 파일 / 응용 프로그램의 아이콘을 변경하는 방법

분류에서Dev

파일 이름에 따라 HTML 제목을 자동으로 변경하는 방법은 무엇입니까?

분류에서Dev

페이지가 완전히로드되었을 때 HTML 콘텐츠를 변경하는 방법

분류에서Dev

배치 파일에서 WinSCP로 제목을 변경하지 않는 방법

분류에서Dev

Angular2 라우터, 콘텐츠 변경, 라우팅 및 페이지 재 구축 방지 방법

분류에서Dev

vue-google-maps에서 마커 아이콘을 변경하는 방법

분류에서Dev

asp.net 페이지에 파비콘과 페이지 제목을 추가하는 방법

분류에서Dev

경로 링크에 따라 페이지 제목을 변경하는 방법 vuejs

분류에서Dev

목록의 파일에서 비용을 계산하고 튜플 (파이썬)으로 변경하는 방법

Related 관련 기사

  1. 1

    변수가 정의되지 않은 경우 파이프 라인을 정상적으로 실패하는 방법

  2. 2

    Oracle Apex 19.2 로그인 페이지에서 앱 아이콘 색상을 변경하는 방법

  3. 3

    vue js html 페이지를 pdf로 변환하는 방법

  4. 4

    jquery를 사용하여 페이지가로드 된 후 아이콘의 색상을 변경하는 방법

  5. 5

    Vue 라우터 링크를 사용하는 Vuetify 버튼으로 회색 배경을 방지하는 방법은 무엇입니까?

  6. 6

    WP-페이지 ID에 따라 페이지 제목을 변경하는 방법

  7. 7

    (vue 라우터) 거의 동일한 뷰로 두 개의 경로를 만들 때 코드를 복제하지 않는 깔끔한 방법이 있습니까?

  8. 8

    (vue 라우터) 거의 동일한 뷰로 두 개의 경로를 만들 때 코드를 복제하지 않는 깔끔한 방법이 있습니까?

  9. 9

    내비게이션 바에서 페이지 제목을 변경하는 방법

  10. 10

    라우터 이름을 통해 vue-router로 Vuetify 탭을 사용하는 방법

  11. 11

    파비콘 아이콘의 테두리 반경을 변경하는 방법이 있습니까?

  12. 12

    Vue 라우터 : 동적 경로에 대한 페이지 제목을 동적으로 생성하는 방법은 무엇입니까?

  13. 13

    Magento 홈 페이지 제품 이동 경로 경로를 변경하는 방법

  14. 14

    파일이 포함 된 파일 이름을 에코하는 방법 [실행중인 파일에 따라 페이지 제목 변경]

  15. 15

    asp.net의 콘텐츠 페이지에서 마스터 페이지의 JS 파일을 비활성화하는 방법

  16. 16

    AngularJS로 페이지 제목을 설정하는 방법

  17. 17

    파비콘을 강제로 표시하는 방법

  18. 18

    페이지 제목을 Openui5로 설정하는 방법

  19. 19

    데이터 목록 제어에 페이지 지정을 적용하는 방법

  20. 20

    우분투에서 드라이브 / 파티션 아이콘을 변경하는 방법은 무엇입니까?

  21. 21

    .jar 파일 / 응용 프로그램의 아이콘을 변경하는 방법

  22. 22

    파일 이름에 따라 HTML 제목을 자동으로 변경하는 방법은 무엇입니까?

  23. 23

    페이지가 완전히로드되었을 때 HTML 콘텐츠를 변경하는 방법

  24. 24

    배치 파일에서 WinSCP로 제목을 변경하지 않는 방법

  25. 25

    Angular2 라우터, 콘텐츠 변경, 라우팅 및 페이지 재 구축 방지 방법

  26. 26

    vue-google-maps에서 마커 아이콘을 변경하는 방법

  27. 27

    asp.net 페이지에 파비콘과 페이지 제목을 추가하는 방법

  28. 28

    경로 링크에 따라 페이지 제목을 변경하는 방법 vuejs

  29. 29

    목록의 파일에서 비용을 계산하고 튜플 (파이썬)으로 변경하는 방법

뜨겁다태그

보관