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

最新推荐文章于 2025-06-18 16:19:36 发布

原创最新推荐文章于 2025-06-18 16:19:36 发布 · 1.1w 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了在Vue.js项目中更改网站标题的三种方法：一是通过创建Vue.directive全局指令；二是利用路由的beforeEach导航守卫设置meta信息；三是安装vue-wechat-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里面加上导航守卫

router.beforeEach((to, from, next) => {
    //路由发生改变时,触发
    window.document.title = to.meta.title == undefined ? '默认标题' : to.meta.title
    if (to.meta.requireAuth) {        
        let token = Cookies.get('access_token');        
        let anonymous = Cookies.get('user_name');        
        if (token) {                             
             next({                    
                 path: '/login',  
                 query: {       
                     redirect: to.fullPath                    
                 }
             })             
        } 
    }    
    next();
})

方法三

1.安装插件 npm install vue-wechat-title --save

2.引入插件，main.js中import

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3.路由配置文件router.js里面配置的页面标题

routers: [{
    path: '/',
    name: 'index',
    component: Index,
    meta: {
        title: 'title'
    }
}]

4.app.vue里面添加指令v-wechat-title即可


<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 --><div v-wechat-title="$route.meta.title"></div>
<!--或者-->
<router-view v-wechat-title="$route.meta.title"></router-view>
//来自官方npm页面