Vue动态设置浏览器标签title

最新推荐文章于 2025-03-27 03:25:32 发布

南瓜加糖

最新推荐文章于 2025-03-27 03:25:32 发布

阅读量768

点赞数

分类专栏： Vue 文章标签： html5 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_33816425/article/details/120704215

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了三种在Vue应用中动态设置浏览器标题的方法：1) 使用vue-wechat-title插件，包括安装、引入和配置；2) 实现自定义指令v-title，在main.js和页面中应用；3) 利用router.beforeEach导航守卫，通过路由信息动态更新title。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用插件vue-wechat-title

1、安装

npm install vue-wechat-title --save

2、在main.js中引入

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

3、在路由里添加title

routes: [
    {
        path: '/login',
        component: () => import('../views/login.vue'),
        meta: {
            title: '登陆'
        }
     }
]

4、在app.vue中添加指令

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

二、使用自定义指令

1、在main.js页面里添加自定义指令

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

2、在需要修改的页面里添加v-title指令

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

三、通过router.beforeEach导航守卫修改title

1、在router里配置title

const router = new Router({
    routes: [
        {
            path: '/login',
            component: Login,
            meta: {
                title: '登录'
            }
        },
        {
            path: '/home',
            component: Home,
            meta: {
                title: '首页'
            }
        }
    ]
})

2、使用router.beforeEach对路由进行遍历，设置title

router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = '默认标题'
    }
    next()
})