Modifique dinámicamente el título del título de la página en el proyecto Vue
①Si necesita configurar dinámicamente el título de la página, puede usar document.title directamente;
②Puede usar beforeEach del enrutador para configurarlo de manera uniforme. Este método usa un título fijo para cada página y asigna el título al ingresar ruta no modificada
1. Utilice document.title para modificar dinámicamente el título de la página.
Establecer documento.título en index.js
//设置标题
Vue.directive({
inserted: function(el,binding){
document.title = el.dataset.title
}
})
Establezca v-title data-title en el div más grande de una página determinada
<template>
<div class="box wrap" v-title data-title="标题设置模块">
<h2 class="title">标题设置模块</h2>
<div class="cask">
<v-business></v-business>
</div>
</div>
</template>
2. Utilice beforeEach para unificar configuraciones.
Se pueden desarrollar aplicaciones de una sola página usando vue-router, pero en la práctica, cada ruta a nivel de página tiene su propio nombre de título, lo que requiere el uso del enrutador beforeEach para configurar de manera uniforme
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