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;
})

全局自定义指令 解决方案

// 全局自定义指令
Vue.directive('title', {
    inserted: function (el, binding) {
        document.title = 'XXX管理系统 - ' + el.dataset.title;
    }
})

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