怎么在vue中动态设置meta标签和title标签

本篇文章给大家分享的是有关怎么在vue中动态设置meta标签和title标签，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

//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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

以上就是怎么在vue中动态设置meta标签和title标签，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。