vue.js에서 페이지 제목을 수정하는 방법: 1. 라우팅 파일 index.js의 필수 경로에 제목을 추가합니다. 2. 경로의 beforeEach 인터셉터에서 처리합니다.
이 기사의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터.
웹페이지를 열 때 웹페이지에는 기본 제목이 있습니다. 다른 페이지 콘텐츠를 로드하면 홈페이지에서 세부정보 페이지로, 세부정보 페이지에서 개인 센터로 제목을 변경해야 합니다. 등.
vue에는 웹페이지 제목을 수정하는 데 도움이 되는 여러 가지 방법이 있습니다. 여기서는 두 가지 옵션을 소개하겠습니다.
옵션 1(권장하지 않음):
비즈니스와 결합하여 생성된 Vue 라이프사이클 함수에서 document.title에 값을 직접 할당합니다.
<script> import axios from 'axios' export default { created () { document.title = '功能授权' } } </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 중국어 웹사이트의 기타 관련 기사를 참조하세요!