vue中动态设置meta标签和title标签的方法
更新时间：2018年07月11日 10:11:37 作者：dusk1712
这篇文章主要介绍了vue中动态设置meta标签和title标签的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮，所有就需要手动设置meta标签，标题和内容
//router内的设置
{
path: '/teachers',
name: 'TDetail',
component: TDetail,
meta: {
title:"教师详情",
content: 'disable'
}
},
{
path: '/article',
name: 'Article',
component: Article,
meta: {
title: "文章详情",
content: 'disable-no'
}
},
//main.js里面的代码
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面meta */
if(to.meta.content){
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
meta.content = to.meta.content;
head[0].appendChild(meta)
}
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next()
});
效果如图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
放大镜效果在很多购物网站都可以看到，本文主要介绍了vue3实现淘宝放大镜效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除，其特点就是“极难”，也因此成为热门挑战，对vue3版本网页小游戏设计思路感兴趣的朋友跟随小编一起看看吧2022-12-12
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
这篇文章主要介绍了详解使用VUE搭建后台管理系统(vue-cli更新至3.0),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了Vue3中ref和reactive函数的使用教程，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，需要的可以参考一下2022-07-07
这篇文章主要介绍了vue项目中如何实现element-ui组件按需引入，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
element-ui中导航组件menu的一个属性:default-active说明
这篇文章主要介绍了element-ui中导航组件menu的一个属性:default-active说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于Vue使用new Blob()实现不同类型的文件下载功能的相关资料,在Vue项目中,经常用Blob二进制进行文件下载功能,需要的朋友可以参考下2023-07-07
VUE的history模式下除了index外其他路由404报错解决办法
在本篇文章里小编给大家分享的是关于VUE的history模式下除了index外其他路由404报错解决办法，对此有需要的朋友们可以学习下。2019-08-08
这篇文章主要为大家介绍了Vue打包优化之生产环境删除console日志配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下2023-09-09
最新评论