Vue项目中动态修改页面标题title

最新推荐文章于 2024-05-09 18:55:33 发布
最新推荐文章于 2024-05-09 18:55:33 发布
阅读量503 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61672533/article/details/126194995
版权

解决需求一

1.安装依赖：npm i vue-wechat-title
2.在main.js中配置：

 3.在需要改变title的vue文件中：

        3-1.首先在最外层div引入（changeTitle自己命名）

        

        3-2.在data里声明

         

        3-3.给changeTitle赋值（后面的就是要展示的内容，根据要求写）

        ··                        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

 

 

 

不要失眠啊！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 动态给每个页面添加title、关键词和描述的方法
11-19
前言：直接写html加title和关键词想必大家都知道怎么去加，但用vue框架开发的项目我们怎么去动态的给每个页面添加呢 ↓ 先在router.js里面配置我们的title、关键词和描述 { path: '/train', name: 'Train', component: () => import('../components/page/Train.vue'), meta: { title: '教师培训-恩启官网', content: { keywords: '教师培训、恩启培训、恩启云课堂、特教老师、线上服务、徐紫薇、王学钢', descrip
vue3 vite title 页面标题设置
码农No.7
11-07 2146
vue3 vite title 按环境配置文件显示不同标题。
动态修改vue页面title
深圳最菜前端
05-20 689
一，只需要在获取数据的时候，给其进行赋值就可以了 // 获取数据 getDetail(page, pageSize).then(resp => { if (resp.errCode == 0) { docment.title = resp.data.data.textTitle // 赋值页面数据 }else { this.$message.error(resp.msg) } }) 二，自己手动写 // 在路由中 routes: [ { name: 'home' path:
vue中修改页面标题
m0_63666855的博客
03-12 844
可以使用 pages 字段来定义标题。首先要有vue.config.js文件，没有的话在根目录创建。在vue.config.js文件中，可以通过链接webpack修改title。注意：修改完vue.config.js需要重新启动才会生效。
vue项目动态修改网页title+icon(通过接口获取title值+icon图片网址)
xu_duo_i的博客
10-14 1790
vue项目动态修改网页title+icon(通过接口获取title值+icon图片网址)
vue 设置动态标题的方法
qq_45787678的博客
06-03 861
1、使用 vue-wechat-title 插件 进行依赖项安装 npm install vue-wechat-title -save 2、安装之后在main.js中进行引入 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) //或者使用下面的 两个方法 都可以 Vue.use(require('vue-wechat-title')) 3、在 vue.config.js 中配置文件 module.export
vue项目微信公众号title设置和调用接口动态修改
情非得已小猿猿
12-19 1754
需求场景： 微信后台配置不同的商户id，请求接口获取商户信息（名称、头像等） 1、安装插件 #yarn add vue-wechat-title #npm i vue-wechat-title 2、main.js文件 Vue.use(require('vue-wechat-title')) 3、App.vue文件 <template> <div id...
vue动态设置页面title方法
热门推荐
星晴Dong
07-13 1万+
下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', ...
解决vue单页面应用中动态修改title问题
10-16
主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue动态修改网页标题的方法及遇到问题
12-09
Vue下有很多的方式去修改网页标题，这里总结下解决此问题的几种方案: 一、最笨方案 结合业务直接在Vue生命周期函数 created 和 mounted 中，给 document.title赋值。 [removed] import axios from 'axios' export ...
vue动态设置页面title的方法实例
12-28
本文主要介绍了Vue动态修改title的方法，需要的朋友可以参考学习，方法如下： 1.通过自定义指令去修改（单个修改比较好） //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: ...
基于Vue的SPA动态修改页面title的方法(推荐)
01-19
最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼，而且在IOS的微信端据说没效果。百度发现要针对IOS的微信做点额外的操作，即：创建一个隐藏的Iframe，然后随便加载一个...
vue动态编辑网页title方法
Betrayer_hobby的博客
01-10 790
vue自定义title
vue数据大屏并发请求
qq_60839348的博客
05-09 561
vue数据大屏并发请求
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
徐同保的专栏
05-09 78
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 437
注释很详细，直接上代码……
vue3自定义拖拽指令
weixin_43641912的博客
05-09 93
自定义拖拽指令: 鼠标位置相对于当前文档的x坐标 - 鼠标位置相对于当前物体的x坐标 就是 物体在文档中的位置。
el-dialog设置el-head固定
最新发布
Gpointy的博客
05-09 44
【代码】el-dialog设置el-head固定。
vue 动态修改网页标题
06-07
在 Vue 中，可以通过修改 `document.title` 来动态修改网页标题。下面是一个简单的例子： ```javascript export default { data() { return { pageTitle: '默认标题' } }, watch: { pageTitle(newTitle) { document.title = newTitle } } } ``` 在上面的例子中，我们使用 `data` 定义了一个 `pageTitle` 属性，它的初始值为 `'默认标题'`。然后，在 `watch` 中监听 `pageTitle` 的变化，一旦变化就会将新的标题赋值给 `document.title`。这样，当我们在组件中修改 `pageTitle` 的值时，网页标题也会相应地改变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值