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

ゝ一世哀愁。 2023-01-21 05:22 214阅读 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 条评论，214人围观）

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

相关阅读

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

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

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

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

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

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

相关 React-document-title实现动态更新页面Title

因为react是单页应用，所以可能需要根据不同的路由改变文档的title。我们可以使用react-document-title组件实现，其提供了一种document.tit

Bertha 。/ 2022年12月11日 07:52/ 0 赞/ 199 阅读

相关 REACT_react动态修改页面title，自定义文档头

方法一在 componentDidMount 为 document.title 赋值 componentDidMount() { document

女爷i/ 2022年10月19日 12:41/ 0 赞/ 451 阅读

相关 vue动态修改meta的title

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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