vue修改网站标题title的三种方法

方法一

  调用Vue.directive()

1.main.js里面添加一个全局指令

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

2.调用的组件里面，随便找一个div加入，v-title data-title="你的标题"

<template>
    <div v-title data-title="标题">
     ......
    </div>
</template>

方法二

利用路由的导航守卫beforeEach在每次页面跳转前更改对应的title

1.router中给每个路由加上meta属性

{
            path: '/login',
            name: 'login',
            component(resolve) {
                require(['./views/login.vue'], resolve)
            },
            meta: {
                title: '登录页',
                keepAlive: true, // 需要被缓存
            }
}

2.在main.js里面加上导航守卫