Vue项目中动态修改页面标题title-Toy模板网

这篇具有很好参考价值的文章主要介绍了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去统一设置文章来源地址https://www.toymoban.com/news/detail-594448.html

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