如何修改Vue项目中的页面title

最新推荐文章于 2024-03-12 17:32:31 发布

吃葡萄不吐葡萄皮嘻嘻

最新推荐文章于 2024-03-12 17:32:31 发布

阅读量8.3k

点赞数 2

分类专栏： vue 文章标签： Vue.js 自定义指令 beforeEach 页面标题生命周期钩子

本文链接：https://blog.csdn.net/qq_45695853/article/details/124043291

版权

vue 专栏收录该内容

73 篇文章 3 订阅

订阅专栏

方法一：全局自定义指令修改

	// 设置修改页面标题的自定义指令
	Vue.directive('title',{
	  inserted: function(el){
	      document.title = el.getAttribute('title')
	      console.log(el)
	  }
	})

在这里插入图片描述

方法二：使用beforeEach去统一设置（在路由配置文件配置）

在这里插入图片描述

方法三：简单粗暴的方式（直接在当前页面的created生命周期里面进行编写）

在这里插入图片描述
注意：以上三种方法的优先级：自定义指令 > 页面生命周期 > 路由配置文件

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吃葡萄不吐葡萄皮嘻嘻

关注关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue项目中修改页面title的方法总结

mengzhiyuan111的博客

08-15

696

方法五：如果public文件夹中index.html 中的title是通过<%= htmlWebpackPlugin.options.title %>这种方式设置，则可以用下面的方法进行修改。方法一：查看当前项目的根目录是否有index.html文件，如果有，则直接在该文件的head中修改title标签的内容。方法四：在当前页面的created生命周期里进行添加。方法二：通过全局自定义指令进行修改。方法三：通过路由配置文件进行修改。

Vue动态修改网页标题的方法及遇到问题

12-09

业务需求，进入页面的时候，网页有个默认标题，加载的网页内容不同时，标题需要变更. 例:功能授权，功能授权(张三). Vue下有很多的方式去修改网页标题，这里总结下解决此问题的几种方案: 一、最笨方案结合业务直接在Vue生命周期函数 created 和 mounted 中，给 document.title赋值。 [removed] import axios from 'axios' export default { created () { document.title = '功能授权' }, mounted() { axios.get('***').then((d)=>{ doc

参与评论您还未登录，请先登录后发表或查看评论

vue 修改浏览器title

weixin_50367873的博客

06-17

1688

vue 在public 文件夹中有一个index.html，直接修改title中的值即可。这是最low的方法。当然你的项目如果是使用webpack或者是vue-cli创建出来的项目，那么你会在title的地方看到 <%= htmlWebpackPlugin.options.title %> //或 <%= webpackConfig.name %> 动态修改title 方法一、第一步：在main.js里面添加一个全局指令 Vue.directive('title', { i

vue中修改页面标题

最新发布

m0_63666855的博客

03-12

1722

可以使用 pages 字段来定义标题。首先要有vue.config.js文件，没有的话在根目录创建。在vue.config.js文件中，可以通过链接webpack修改title。注意：修改完vue.config.js需要重新启动才会生效。

Vue 修改页面 title

单飞吧的博客

11-19

688

router.js 添加 meta { path: "/home", name: "首页", component: () => import("../views/home.vue"), meta:{title:"首页"} }, main.js 添加一下代码 // 页面title router.beforeEach((to,from,next)=>{ if(to.meta.title){ document.title = to.meta.title } next()

vue项目动态设置页面title及是否缓存页面的问题

10-17

### Vue项目动态设置页面title 在Vue项目中，传统意义上每个HTML页面的`<title>`标签设置方式不适用于SPA，因为SPA只有一个页面入口，而是需要依赖于路由系统来动态改变页面标题。通常的做法是使用Vue Router的路由...

vue 实现路由跳转时更改页面title

10-16

本篇将详细介绍如何在Vue项目中，利用Vue Router来实现路由跳转时自动更改页面标题的功能。首先，我们需要在Vue Router的配置中给每个路由添加自定义的元信息（meta信息），通常这个操作是在路由文件夹下的index....

在vue中实现给每个页面顶部设置title

11-20

在Vue项目中，我们经常使用Element UI这个组件库，其中`el-tooltip`组件用于提供鼠标悬停时的提示信息。在`el-tabs`组件中，如果标签页的文字过长导致溢出，可以使用`el-tooltip`配合`slot="label"`来展示完整的文本...

vue项目强制清除页面缓存的例子

10-16

在Vue项目开发中，页面缓存问题是前端开发经常会遇到的难题。这篇文章为我们提供了一个在Vue项目中强制清除页面缓存的解决方案。以下将对内容进行知识点的详细解释。首先，要理解前端页面缓存的基本原理。浏览器...

解决vue单页面应用中动态修改title问题

10-16

主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

Vue项目修改页面标签

阿水的博客

05-11

3412

Vue项目修改网页标签、Vue项目修改页面标签

Vue2组件改变页面title

qq_62254095的博客

06-03

2699

这里我们在 beforeEach 路由钩子函数中监听路由变化，如果当前路由有设置 meta 属性，并且 meta 对象中包含 title 属性，则将页面标题设置为 meta.title 中定义的标题。在这里我们使用了 beforeEach 路由钩子函数来监听路由变化，检测到有路由目标需要设置标题时，我们便将 document.title 修改为路由目标的标题。在 mounted 生命周期函数中，我们调用了 document.title 来修改页面标题。当该组件被挂载后，页面的标题就会变成 “新的标题”。

vue项目动态修改页面title

热门推荐

m0_61476911的博客

08-23

1万+

动态修改页面title外加点击跳转重新打开一个新页面并修改title

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

u011200562的博客

05-14

255

一、在main.js中： // 设置浏览器标题 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 二、在某个页面最外层的div上：效果：简单的方法：直接在页面里写 document.title="溯源平台" 或者通过路由 const routes = [ { path: '/apply',

vue修改网站标题title的三种方法

foolishbig的博客

02-15

1万+

方法一调用Vue.directive() 1.main.js里面添加一个全局指令 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 2.调用的组件里面，随便找一个div加入，v-title data-title="你的...

vue动态修改页面title的两种方法

m0_72883244的博客

11-24

1257

本文主要介绍了vue动态修改页面title的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。vue动态修改页面title的两种方法_vue.js_脚本之家。

vue 修改浏览器标题

weixin_30896511的博客

07-18

588

主要思路： 1.可以从路由获取当前页面的标题，再通过document.title设值，或者在最外层的index.html页面添加<title>标签 import router from './router' router.beforeEach(async (to, from, next) => { document.title = to.meta.title }) 2...

vue 修改标题栏_VUE动态修改titile的三种方法

weixin_42509616的博客

02-11

2312

第一种：适用于在已经定义好title的情况下，例如首页，关于页等等1.1 main.jsconst defaultTitle = '默认 title'router.beforeEach((to, from, next)=>{document.title= to.meta.title ?to.meta.title : defaultTitlenext()})1.2 index.jsroutes...

vue项目如何修改title

06-01

在Vue项目中，可以通过修改页面的`<title>`标签来修改页面的标题。以下是一种常见的方法： 1. 在需要修改标题的组件中，使用`mounted()`生命周期方法来获取`<title>`元素： ```javascript mounted() { document.title = "新的页面标题"; } ``` 2. 在`<head>`标签中添加一个空的`<title>`标签： ```html <head> <title></title> </head> ``` 这个空标签将会在运行时被Vue自动填充为应用程序的默认标题。 3. 在组件的`metaInfo()`方法中设置`title`属性： ```javascript import { MetaInfo } from 'vue-meta'; export default { name: 'MyComponent', metaInfo(): MetaInfo { return { title: '新的页面标题', }; }, }; ``` 这种方法需要安装并使用`vue-meta`库，但可以在整个应用程序中更方便地管理页面标题。