Vue 동적 브라우저 제목을 설정하는 두 가지 방법을 가르쳐주세요(자세한 예)

이 기사는 vue를 사용하여 브라우저 제목을 동적으로 설정하는 방법을 설명합니다. 도움이 되기를 바랍니다.

vue는 동적으로 브라우저 제목을 설정합니다.

일반적으로 브라우저 제목을 설정하는 방법은 다음과 같습니다.

하지만 vue는 단일 페이지 애플리케이션이고 항목 파일에는 하나의 HTML만 있습니다. 태그는 하나만 설정할 수 있으므로 브라우저 태그를 동적으로 설정하는 데 일반적으로 사용되는 두 가지 방법은 다음과 같습니다. router.beforeEach

//多语言项目，根根据自己项目来
 import i18n from '@/i18n/index';
 document.title = i18n.t("router." + to.name)
 
 //单语言项目
  document.title = to.name

언어 전환 경로는 변경되지 않으므로 추가해야 합니다. 단일 언어 프로젝트에는 필요하지 않습니다.

//多语言项目
  document.title = i18n.t("router." + to.name)

완벽하게 작동하며 기본 호환성이 좋습니다.

두 번째 유형
플러그인 사용

1. 플러그인 설치

npm install vue-wechat-title --save

2.main.js 참조

import VueWechatTitle from 'vue-wechat-title'//动态修改title
Vue.use(VueWechatTitle)

3.
Notes

참고: 값은 이 데모에서 사용되는 자신의 프로젝트의 라우팅 구조를 기반으로 합니다. 이름 값이며, i18n에는 해당 언어 패키지가 있습니다.

메타 개체에 제목 속성을 추가할 수 있습니다.

외부에서 to.meta.title을 사용하세요. [관련 추천: "

vue.js tutorial

"]

위 내용은 Vue 동적 브라우저 제목을 설정하는 두 가지 방법을 가르쳐주세요(자세한 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!