VUE2:
一、固定设置标题方案
方法一,在vue.config.js文件
添加如下代码:
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].title = '标题';
return args;
)
}
方法二,直接在public/index.html中修改title即可,如下:
二、动态设置标题方案
方法一、通过路由导航守卫设置,使用Vue-Router的beforeEach拦截
/* 第一步:在router中的index.js路由下设置mate属性*/
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
}
}
]
/* 第二步:在路由守卫router.beforeEach中设置如下代码 */
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
})
方法二、使用插件vue-wechat-title来设置浏览器动态标题
第一步:安装插件
1. npm vue-wechat-title --save
第二步:在全局main.js引入、使用该插件
1. import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件
2. Vue.use(VueWechatTitle);
第三步:在router中的index.js路由下设置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:'测试'
}
},
]
第四步:我们在APP.vue使用vue-wechat-title插件
<router-view v-wechat-title="$route.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 重启项目即可。