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()
});

效果如图： 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• 详解vue-meta如何让你更优雅的管理头部标签
• Vue2 SSR渲染根据不同页面修改 meta
• Vue项目添加动态浏览器头部title的方法
• vue cli2.0单页面title修改方法
• 使用vue-router设置每个页面的title方法
• 基于Vue的SPA动态修改页面title的方法(推荐)
• 浅谈vue2 单页面如何设置网页title
• vue 如何添加全局函数或全局变量以及单页面的title设置总结