Vue中设置浏览器标签栏图标以及title

1、设置浏览器标签栏图标

使用脚手架创建的项目，已经将标签栏图标设置好了，默认的是vue的图标。如果需要修改，只需要将public文件夹下面的favicon.icon文件替换为我们自己的图标即可

2、浏览器标签栏title修改

title的修改有很多种方法，

第一种是：路由配置中的路由元信息结合路由导航钩子来实现的

import Vue from 'vue'
import VueRouter from 'vue-router'import Login from "../views/login/Login.vue"
import Home from "../views/home/Home.vue"
import AdminsList from "../components/admins/AdminsList.vue"
import Welcome from "../views/home/Welcome.vue"Vue.use(VueRouter)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 = to.meta.title //在全局后置守卫中获取路由元信息设置title})export default router

第二种：全局的自定义指令实现：

在main.js中注册全局自定义指令

//全局自定义指令
Vue.directive('title', { //单个修改标题inserted: function (el, binding) {document.title = el.dataset.title}
})

在需要设置浏览器导航栏title的组件最外层标签上面书写title内容

<template><div v-title data-tittle="用户列表">........</div>
</template><script>......
</script><style>.....
</style>

Vue中设置浏览器标签栏图标以及title相关推荐

vue中修改浏览器标签栏title和图标
vue中修改浏览器标签栏title和图标一.修改文字在项目中的index.html文件title标签中直接写二.修改标签栏图片 1.在项目中的static文件中放入一张图片 2.在index.h ...
Vue 中设置浏览器的 title 跟随路由的名称变化
Vue 中设置浏览器的 title 跟随路由的名称变化浏览器title的变化会根据路由的变化而改变可以先设置一个公共的文件夹setting, 用于存放公共的名称, 例如这里的 `小火车况且况且 m ...
vue项目设置浏览器icon图标
1. 引入图标在vue项目中的index.html中引入图标,为防止项目打包时图片路径出错,需把icon图标放在static静态文件夹下 <link rel="shortcut ic ...
Vue设置浏览器小图标（ICON）
Vue设置浏览器小图标当我们使用浏览器做开发时,我们能希望浏览器标签页能显示自己的logo小图标,这个是怎样设置的呢? 第一步:准备logo图片信息找到自己的logo,通过图片在线转换格式,转换成 ...
在vue中修改浏览器图标和名字
在vue中修改浏览器图标和名字 vue中,网页图标默认使用的是vue自带的一个icon的图标,也是vue的logo. 下面整理了几种改变标题和图标的方法 1.修改图标样式 01.使用图片这个方法是可 ...
VUE设置浏览器icon图标
Vue怎么设置左上角icon图标呢?步骤如下: (1).提前把icon图标copy到static目录下 (2).在index.html页面添加 <link rel ="shortcut ...
只需2步，教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...
在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
在 vue 中使用 SVG 建立图标系统并且使用
首先我们先来学一下 svg 标签的基础知识,参考了阮一峰大神的网络日志,链接:http://www.ruanyifeng.com/blog/2018/08/svg.html SVG 全称是可缩放矢量图 ...

Vue中设置浏览器标签栏图标以及title

Vue中设置浏览器标签栏图标以及title相关推荐

最新文章

热门文章