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 =newVueRouter({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()//执行进入路由，如果不写就不会进入目标页})exportdefault router