文章目录
第一篇、浏览器动态标题一、使用vue-wechat-title设置动态标题1、安装vue-wechat-title2、main.ts引入插件3、在router中的index.ts路由下设置mate属性4、APP.vue使用vue-wechat-title插件5、实现效果二、通过路由导航守卫实现第二篇、更换浏览器标题的小图标三、更换浏览器标题的小图标1、制作ico小图标2、替换public\favicon.ico下的图标3、实现效果：第一篇、浏览器动态标题
一、使用vue-wechat-title设置动态标题
由于访问不同的URL看到的页面title都是一样的，如何设置不同的页面Title呢？ 比较方便的做法是用vue-wechat-title插件来实现。
下面讲解：
使用插件vue-wechat-title，设置浏览器动态标题的步骤
1、安装vue-wechat-title
npm install vue-wechat-title -S npm install vue-wechat-title --save"vue-wechat-title": "^2.0.7" //-9-1 安装的
注：-S和–save都安装在package.json的dependencies生产环境
2、main.ts引入插件
import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件Vue.use(VueWechatTitle);
3、在router中的index.ts路由下设置mate属性
const routes = [{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),meta:{title:'关于'}},{path: '/test',name: 'Test',component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),meta:{title:'测试'}},]
重点是meta中的title
4、APP.vue使用vue-wechat-title插件
<router-view v-wechat-title="$route.meta.title" />
在router-view中添加 v-wechat-title=“$route.meta.title” 实现动态title的展示
5、实现效果
真实开发过程中的页面结果如下图：
二、通过路由导航守卫实现
const router = createRouter(constRoutes)export function resetRouter() {const newRouter = createRouter(constRoutes)router.beforeEach((to, form, next) => {if (to.meta.title) {document.title = `${to.meta.title}-服务开发工具`} else {document.title = '服务开发工具'}next()})router.matcher = newRouter.matcher}export default router
重点是：
router.beforeEach((to, form, next) => {if (to.meta.title) {document.title = `${to.meta.title}-默认名称`} else {document.title = '默认标题'}next()})
第二篇、更换浏览器标题的小图标
三、更换浏览器标题的小图标
vue项目默认使用的浏览器小图标是favicon.ico，存放在public\favicon.ico下，因此，只需替换这个favicon.ico图标即可。
1、制作ico小图标
后缀为ico的图标也不难做，只需修改你要使用图片的后缀为ico即可
2、替换public\favicon.ico下的图标
3、实现效果：
注意：如果改了小图标，页面显示不生效
解决方法：在public\index.html (总的index.html)中
重点是注释掉 如下 两行代码
<!DOCTYPE html><html lang="en" style="overflow-y: auto"><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.png" />--> //注释掉<!-- <link href="/css?family=Roboto:100:300,400,500,700,900|Material+Icons" rel="stylesheet"> --> //注释掉<title><%= VUE_APP_TITLE %></title></head>...</html>
