Vue设置浏览器标签栏图标以和title标题
第一种方法:vue-router 并使用路由守卫 解决方案
const routes = [
{
path: '/',
redirect: '/login',
},
{
path: "/login",
name: 'Login',
component: Login,
meta:{
title:"登录"
}
},
{
path: '/home',
component: Home,
children: [{
path: '',
name: 'home',
component: Welcome,
meta: {
title: '欢迎光临'
}
},
{
path: 'adminsList',
name: 'adminsList',
component: AdminsList,
meta: {
title: '用户管理'
}
}]
}
]
const router = new VueRouter({
routes,
mode: "history"
})
router.afterEach((to, from) => {
document.title = 'XXX系统 - ' to.meta.title;
})
第二种方法 全局自定义指令 解决方案
// 全局自定义指令 main.js
Vue.directive('title', {
inserted: function (el, binding) {
document.title = 'XXX系统 - ' el.dataset.title;
}
})
// vue文件中 需要使用 自定义指令
// 这种没有第一种 方便 需要对 整个项目中需要的地方使用自定义指令
<template>
<div v-title data-tittle="用户列表">
........
</div>
</template>
<script>
......
</script>
<style>
.....
</style>
第三种 使用插件vue-wechat-title
1、安装
npm install vue-wechat-title --save
2、在main.js中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
3、在路由里添加title
// 在路由配置中 添加 mete => title
routes: [
{
path: '/login',
component: () => import('../views/login.vue'),
meta: {
title: '登陆页面'
}
}
]
4、在app.vue中添加指令
// v-wechat-title 为插件指令
<router-view v-wechat-title="$route.meta.title"/>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggbkff
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13