vue动态修改页面title的两种方法
更新时间：2023年06月27日 09:53:46 作者：芒果沙冰哟
本文主要介绍了vue动态修改页面title的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目有时候需要根据页面需要动态的去修改页面标题名称,首先看一下效果图:
上图就是动态修改前后的对比图,可能还是不够形象,看看router路由里面的配置项:
方法一:
一般在配置路由的时候会配一个静态的title,当有些页面需要修改时,这个时候就需要使用到路由守卫,写在需要修改title的页面:
beforeRouteEnter(to, from, next) {
//to是当前页面,from是从哪里来,next是放行
if (to.query.name) {
to.meta.title = to.query.name //获取从上个页面传过来的name再进行修改
}
next() //切记操作完一定要记得放行,否则无法正常跳转页面
},A页面跳转时需要带的name参数(就是需要修改的title):
handleGo() {
this.$router.push({
path: '/demo/study',
query: {
name: '做前端死路一条',
},
})
},方法二(简单直接):
handleGo() { this.$router.push('/demo/study') document.title = '1111' //直接等于需要修改的名字即可 },跳转后修改的效果是这样的 :
还有一个踩坑的地方,当需要跳转时重新打开一个页面再修改页面标题,就不能使用简单直接的方法二,还是需要使用页面的路由守卫:
handleGo() {
let { href } = this.$router.resolve({
path: '/demo/study',
query: {
name: '天气有点热',
},
})
window.open(href, '_blank')
},然后基本功能就这样,可以试着动手看看
到此这篇关于vue动态修改页面title的两种方法的文章就介绍到这了,更多相关vue动态修改页面title内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中h函数和render函数的区别的相关资料,h函数是工具,负责创建节点, render函数是过程,负责组织节点并生成最终的虚拟DOM,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-06-06
vue 使用mescroll.js框架实现下拉加载和上拉刷新功能
这篇文章主要介绍了vue 使用mescroll.js框架 实现下拉加载和上拉刷新功能,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了vue实现移动端省市区选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
轮播图是前端很常用的一个网页特效，几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-08-08
这篇文章主要介绍了vite+vue3+ts项目中提示无法找到模块的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
在本篇文章中我们给大家整理了2种关于VUE项目中使用百度地图的最简单的方法，非常实用，一起来学习下。2018-09-09
这篇文章主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下2020-02-02
上一篇我们安装了vue-cli，接下来我们就使用该脚手架进行创建项目，这篇文章主要介绍了vue-cli创建项目以及项目结构的相关资料,需要的朋友可以参考下面文章的具体内容2021-10-10
本文主要介绍了Vue+SpringBoot实现支付宝沙箱支付的示例代码，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
最新评论