VUE2：
二、普通方案，使用Vue-Router的beforeEach拦截
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}}]在路由的beforeEach 拦截器里处理router.beforeEach((to, from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}})
VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。
1 标题修改
标题修改直接在项目的 /public/index.html中修改title标签即可。
<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">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>明月网址导航</title>
</head>
2 图标修改
这个修改相对来说，需要以下几个步骤。
1）首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的favicon.ico，同时删除 /public/img/icons/ 下面的VUE图片。
2）在根目录下面新建vue.config.js， 添加pwa
module.exports = {
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
}
};
3 重启项目即可。
