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,238 Views
