vue3·设置动态浏览器标题与图标修改

vue3·设置动态浏览器标题与图标修改

一、方法:通过路由守卫者方式实现

1】项目下 router/index.js 定义中const routes = [] 里加入

meta: {
    title: '管理台 - 登陆',
    keepAlive: false
 },

2】同上,设置路由守卫标题

/* 第二步:在路由守卫router.beforeEach中设置如下代码 */
router.beforeEach((to) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

3】完整例子

import {
	createRouter,
	createWebHashHistory
} from 'vue-router'

const routes = [{
		path: '/',
		name: 'HomeLogin',
		meta: {
			title: '商城管理台 - 登陆',
			keepAlive: false
		},
		component: () => import('../views/HomeLogin.vue')
	},
	{
		path: '/HomeView',
		name: 'HomeView',
		meta: {
			title: '商城管理台 - 概览',
			keepAlive: false
		},
		component: () => import('../views/HomeView.vue')
	}
]

const router = createRouter({
	history: createWebHashHistory(process.env.BASE_URL),
	routes
})
/* 第二步:在路由守卫router.beforeEach中设置如下代码 */
router.beforeEach((to) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})
export default router

二、方法:通过直接在public/index.html中修改title即可

三、图标修改:首先做一个ico的小图标,命名为 favicon.ico 放在 /public/下面,替换原有的 favicon.ico

2,503 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注