动态修改Vue项目中的页面title

ゝ一世哀愁。 2023-01-21 05:22 230阅读 0赞

### 一、在main.js中： ###

// 设置浏览器标题
    Vue.directive('title', {
      inserted: function (el, binding) {
        document.title = el.dataset.title
      }
    })

### 二、在某个页面最外层的div上： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

效果：

![20210514163949159.png][]

### 简单的方法： ###

直接在页面里写

document.title="溯源平台"

或者通过路由

const routes = [
      {
        path: '/apply',
        component: () => import(/* webpackChunkName: "login" */ '@/views/apply.vue'),
        meta: {title:"助销员申请"}
      },
    
    ]

main.js

router.beforeEach((to, from, next)=>{
      if(to.meta.title){
        document.title = to.meta.title
      }
      next()
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221020/f5adfc09b02c4fdbbaf282c4672c78fc.png
[20210514163949159.png]: /images/20221020/58ef347fa48443c6a76f8639a83eecdb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关动态更改页面的标题 title。

document.title = '需要更改的标题名字' 会去更改页面上的： ![20191010153421387.png][] [201910101534

亦凉/ 2023年06月06日 08:06/ 0 赞/ 84 阅读

相关 vue 使用vue-wechat-title动态设置title

安装vue-wechat-title npm install vue-wechat-title --save 在mian.js import VueW

客官°小女子只卖身不卖艺/ 2023年05月28日 12:56/ 0 赞/ 11 阅读

相关动态修改Vue项目中的页面title

一、在main.js中： // 设置浏览器标题 Vue.directive('title', { inserted: function (el

ゝ一世哀愁。/ 2023年01月21日 05:22/ 0 赞/ 231 阅读

相关 vue实现根据页面动态改变title

老板，来一盘代码效果： ![在这里插入图片描述][20201119102942562.png_pic_center] ![在这里插入图片描述][2020111910

太过爱你忘了你带给我的痛/ 2022年12月22日 09:19/ 0 赞/ 262 阅读

相关 vue动态修改meta的title

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2022年09月03日 00:07/ 0 赞/ 325 阅读

相关 Vue中更改页面浏览器的 title

只需要在路由中使用meta对象，添加 title 即可 { path: '/title', name: 'title',

╰半夏微凉°/ 2022年08月28日 14:51/ 0 赞/ 259 阅读

相关 vue-wechat-title动态修改title

在使用Vue制作项目的过程中，发现title没有变化所以使用vue-wechat-title插件动态修改tilte 一、安装 npm vue-wechat-title -

朱雀/ 2022年01月05日 02:33/ 0 赞/ 459 阅读

相关 vue-wechat-title动态修改title

在使用Vue制作项目的过程中，发现title没有变化所以使用vue-wechat-title插件动态修改tilte 一、安装 npm vue-wechat-title -

布满荆棘的人生/ 2021年12月22日 03:15/ 0 赞/ 417 阅读

相关 vue-wechat-title动态修改title

在使用Vue制作项目的过程中，发现title没有变化所以使用vue-wechat-title插件动态修改tilte 一、安装 npm vue-wechat-title -

梦里梦外;/ 2021年10月01日 04:50/ 0 赞/ 510 阅读

相关 vue动态设置title,使用 vue-wechat-title

1.安装依赖 npm install vue-wechat-title --save 2.引用在main.js import VueWechatTitle

梦里梦外;/ 2021年08月26日 20:32/ 0 赞/ 657 阅读