vue3.2使用vue-wechat-title及路由导航守卫实现浏览器动态标题、替换浏览器的vue小图标

迷小圈

已于 2023-07-13 09:31:49 修改

阅读量2.7k

点赞数

分类专栏： vue 文章标签： vue.js 微信 javascript

于 2022-09-01 12:34:10 首次发布

本文链接：https://blog.csdn.net/wang13679201813/article/details/126639129

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

第一篇、浏览器动态标题
第二篇、更换浏览器标题的小图标
- 1、更换浏览器标题的小图标

第一篇、浏览器动态标题

1、使用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"   //2022-9-1 安装的

注：-S和–save都安装在package.json的dependencies生产环境

2)、main.ts引入插件

import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件
Vue.use(VueWechatTitle);

3)、在router中的index.ts路由下设置meta属性

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)、实现效果

真实开发过程中的页面结果如下图：

在这里插入图片描述

2、通过路由导航守卫实现

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()
  })

3、使用vueuse中的useTitle

<template>
  <div>
    <button @click="handleClick">Update title</button>
    <p>Default title: {{ defaultTitle }}</p>
    <p>New title: {{ title }}</p>
  </div>
</template>
<script>
import { useTitle } from '@vueuse/core'
export default {
  setup() {
    const title = useTitle('New title')
    const defaultTitle = useTitle()
    const handleClick = () => {
      title.value = 'Updated title'
    }
    return { title, defaultTitle, handleClick }
  },
}

第二篇、更换浏览器标题的小图标

1、更换浏览器标题的小图标

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="https://fonts.googleapis.com/css?family=Roboto:100:300,400,500,700,900|Material+Icons" rel="stylesheet"> -->  //注释掉
    <title><%= VUE_APP_TITLE %></title>
  </head>
 ...
</html>