![](https://img-blog.csdnimg.cn/img_convert/5045d1ece3c3aefeef6c0fd88ed55dcc.png)
1. Changer le titre du navigateur dans le projet vue
Méthode 1 : Dans le fichier vue.config.js, ajoutez le code suivant :
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].title = '标题';
return args;
)
}
Méthode 2 : Modifiez simplement le titre directement dans public/index.html, comme suit :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>要修改显示的标题</title>
</head>
<body>
</body>
</html>
2. Changer l'icône du navigateur dans le projet vue
1. Commencez par créer une petite icône ico, nommez-la favicon.ico et placez-la sous /public/ pour remplacer le favicon.ico d'origine. Vous devez sauvegarder le favicon.ico d'origine.
2. Vérifiez dans /public/index.html/ si le nom de l'icône favicon.ico est référencé.
3. Contrôlez dynamiquement le titre du navigateur dans le projet
Protégez les paramètres grâce à la navigation d'itinéraire , en utilisant l'interception beforeEach de Vue-Router
/* 第一步:在router中的index.js路由下设置mate属性*/
routes: [{
path: '/',
name: 'home',
component: () => import('@/pages/home/index'),
meta:{
keepAlive: true
}
},
{
path: '/person/auth,
name: 'personAuth',
component: () => import('@/pages/person/auth),
meta:{
title: '功能授权',
keepAlive: false
}
}
]
/* 第二步:在路由守卫router.beforeEach中设置如下代码 */
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
})