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中的el-button样式自定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Vue3项目页面实现echarts图表渐变色的动态配置的实现步骤
在开发可配置业务平台时,需要实现让用户对项目内echarts图表的动态配置,让用户脱离代码也能实现简单的图表样式配置,颜色作为图表样式的重要组成部分,其配置方式是项目要解决的重点问题,所以本文介绍了Vue3项目页面实现echarts图表渐变色的动态配置2024-10-10
这篇文章主要为大家详细介绍了vue实现动态控制表格列的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了Vue中使用provide和inject实例对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Vue3+Element Plus实现动态标签页以及右键菜单功能
这篇文章主要给大家介绍了关于Vue3+Element Plus实现动态标签页以及右键菜单功能的相关资料,Vue 3和Element Plus提供了一种简单的方法来实现侧边菜单栏与标签页之间的联动,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了用Vue编写抽象组件的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
解决vue项目中出现Invalid Host header的问题
这篇文章主要介绍了解决vue项目中出现"Invalid Host header"的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家详细介绍了Vue2仿淘宝实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
在Vue中监听滚动事件可以通过使用指令或者自定义事件来实现,这篇文章主要给大家介绍了关于前端vue滚动条滚动监听问题成功解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
最近找到几个好用的插件,这里分享一下,下面这篇文章主要给大家介绍了关于vue3中超好用的插件整理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论