# 1. vue的指令来设置标题

在main.js中设置

// 设置浏览器标题
Vue.directive('title', {
  inserted: (el) => {
    document.title = el.dataset.title
  }
})
1
2
3
4
5
6

在各个页面的根标签设置（template下的）

  <div class="rel-container" v-title data-title="登录"></div>
1

# 2. 使用插件 (微信等APP里面也可以生效)

npm i vue-wechat-title -S
1

在main.js中加入

import vueWechatTitle from 'vue-wechat-title'
vue.use(vueWechatTitle)
1
2

在路由(router)下面加上title

{
    path: '/login',
    name: 'login',
    component: () => import('views/login/login.vue'),
    meta; {
        title: '登录'
    }
}
1
2
3
4
5
6
7
8

在根的router-view上, 加上组件的指令

<router-view v-wechat-title="$router.meta.title"></router-view>
1

插件的原理也是document.title

TOC