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"/>