vue项目动态设置浏览器标题title几种方法

原创已于 2024-05-29 14:06:53 修改 · 9.3k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

于 2021-03-12 15:29:11 首次发布

vue2知识专栏收录该内容

15 篇文章

订阅专栏

本文介绍了三种在Vue项目中设置动态标题的方法：使用vue-wechat-title插件、通过路由导航守卫以及单个页面修改标题。每种方法都提供了详细的步骤和示例代码。

文章目录

方法一：使用vue-wechat-title插件设置

第一步：安装插件

npm vue-wechat-title --save

第二步：在main.js全局引入、使用插件

import VueWechatTitle from 'vue-wechat-title' //动态修改title
Vue.use(VueWechatTitle);

第三步：在通过路由的mate属性携带title

const routes = [{
        path: '/login',
        component: () =>
            import ('@/views/login'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/404',
        component: () =>
            import ('@/views/404'),
        meta: {
            title: '错误'
        }
    }]

第四步：在App.vue里面使用插件

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

这样就ok啦，第一种方法是不是很简单

方法二：通过路由导航守卫设置

第一步：跟第一种方法一样，设置mate的title属性

const routes = [{
        path: '/login',
        component: () =>
            import ('@/views/login'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/404',
        component: () =>
            import ('@/views/404'),
        meta: {
            title: '错误'
        }
    }]

第二步：在路由前置守卫中

router.beforeEach(async(to, form, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = '9527' //此处写默认的title
    }
  	.....
  	//接下来写正常的路由守卫就可以了
})

这个方法全部在路由里面操作就可以了，好像比第一种更简单哦

方法三：单个修改title（不推荐动态标题使用，推荐统一标题或者单个标题使用）

第一步：在main.js 页面里添加自定义指令

Vue.directive('title', {//单个修改标题
 inserted: function (el, binding) {
 document.title = el.dataset.title
 }
})

第二步：在需要修改的页面里添加v-title 指令

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

说明一下，方法三在App.vue里面使用v-title，则整个项目的标题都将一样，如果想单个页面使用某个标题，在单个页面使用v-title。