vue-router를 사용하여 각 페이지의 제목 방법을 설정하는 방법

아래에서는 vue-router를 사용하여 각 페이지의 제목을 설정하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

기본 환경 구성: webpack + vue2.0 + vue-router +nodeJS

라우터 폴더 아래에 index.js 파일을 입력하세요

먼저 소개:

import Vue from 'vue'
import Router from 'vue-router'

그런 다음 라우팅 주소에서 각 경로를 구성합니다.

routes: [
 {   /* （首页）默认路由地址 */
  path: '/',
  name: 'Entrance',
  component: Entrance,
  meta: {
  title: '首页入口'
  }
 },
 {   /* 修改昵称 */
  path: '/modifyName/:nickName',
  name: 'modifyName',
  component: modifyName,
  meta: {
  title: '修改昵称'
  }
 },
 {   /* 商品详情 */
  path: '/goodsDetail',
  name: 'goodsDetail',
  component: goodsDetail,
  meta: {
  title: '商品详情'
  }
 },
 { /* Not Found 路由，必须是最后一个路由 */
  path: '*',
  component: NotFound,
  meta: {
  title: '找不到页面'
  }
 }
 ]

각 메타에 페이지 제목 이름을 설정하고 최종적으로 순회합니다.

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

이렇게 하면 각 VUE 페이지에 제목이 추가됩니다

위 내용은 모두에게 도움이 되길 바랍니다. 미래에. .

관련 기사:

Vue.set을 사용하여 Vue에서 객체 속성 메소드를 동적으로 추가

vue2.0의 dev-server.js에는 구성 메소드가 없습니다

Vue 파일에서 진행 상황을 구현하는 방법 드래그 앤 업로드 기능

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