vue项目设置和动态修改页面标题title

转:vue项目设置和动态修改页面标题title

设置:

1、在项目的public文件下的index.html中的< title > 标签设置

请添加图片描述
在这里插入图片描述

2、在main.js中设置

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

 

 

动态修改:

1、修改router中index.js文件中每个路由加上 meta:{ title: ‘xxx’}

复制代码
const router = new Router({
    mode: '',
    routes: [
        {
            path: '/ ',
            name: ' ',
            component:  ,
            meta:{
                // xxx是自己想要设置的标题名
                title: 'xxx'
            }
        }
    ]
})
复制代码

 

 

2、在页面中直接对document.title赋值
在这里插入图片描述

posted @   BBS_自律  阅读(3091)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
点击右上角即可分享
微信分享提示