Vue 프로젝트에서 페이지 제목 제목을 동적으로 수정합니다.

Vue 프로젝트에서 페이지 제목 제목을 동적으로 수정합니다.

①페이지 제목을 동적으로 설정해야 하는 경우 document.title을 직접 사용할 수 있습니다.
②라우터의 beforeEach를 사용하여 균일하게 설정할 수 있습니다. 이 방법은 각 페이지마다 고정된 제목을 사용하며, 경로 수정되지 않음

1. document.title을 사용하여 페이지 제목을 동적으로 수정합니다.

index.js에 document.title 설정

//设置标题
Vue.directive({
    
    
    inserted: function(el,binding){
    
    
        document.title = el.dataset.title
    }
})
 

특정 페이지의 가장 큰 div에 v-title data-title 설정

<template>
  <div class="box wrap"  v-title data-title="标题设置模块">
    <h2 class="title">标题设置模块</h2>
    <div class="cask">
      <v-business></v-business>
    </div>
  </div>
</template>

2. beforeEach를 사용하여 설정 통합

단일 페이지 애플리케이션은 vue-router를 사용하여 개발할 수 있지만 실제로 각 페이지 수준 경로에는 고유한 제목 이름이 있으므로 균일하게 설정하려면 라우터의 beforeEach를 사용해야 합니다.

import Vue from "vue";
import VueRouter from "vue-router";
 
Vue.use(VueRouter);
 
const router = new VueRouter({
    
    
    routes:[
        {
    
    
           path:'/',
           name:'index',
           meta:{
    
    title:"我是首页"},
           component: Index
    
    },
    {
    
    
           path:'/',
           name:'index',
           meta:{
    
    title:"我是列表页"},
           component: List
    }
   ]
})
router.beforeEach((to,from,next)=>{
    
    //beforeEach是router的钩子函数，在进入路由前执行
    if(to.meta.title){
    
    //判断是否有标题
        document.title = to.meta.title
    }
    next()  //执行进入路由，如果不写就不会进入目标页
})
 
export default router