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>