Vue项目中动态修改页面标题title

Vue项目中动态修改页面标题title

①如果需要动态设置页面的title，可以直接使用document.title；
②可以使用router的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可以开发单页面应用，但实际中每个页面级别的路由都有自己的title名，这就要利用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