vue中动态设置meta标签和title标签的方法

2024-10-20 09:25:52

因为和原生的交互是需要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()
});

效果如图：

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

Vue2 SSR渲染根据不同页面修改 meta

本文主要介绍了Vue2 SSR渲染根据不同页面修改 meta,分享给大家,具体如下: 注意: 经过测试, vue-meta 会导致内存泄漏, 请慎用- 以现在 vue2 的服务端渲染模式, 都是通过 webpack 生成 html 模版文件(或者直接在 server.js 里拼接), 然后通过fs.readFileSync 读取该文件, 再通过 res.end 输出, 这样就造成 meta 修改很麻烦这时候我们可以借助 vue-meta 来管理, 下面以官方的vue-hackernews-2
基于Vue的SPA动态修改页面title的方法(推荐)

最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改缺点:App.Vue默认的e
详解vue-meta如何让你更优雅的管理头部标签

在 Vue SPA 应用中,如果想要修改HTML的头部标签,或许,你会在代码里,直接这么做: // 改下title document.title = 'what?' // 引入一段script let s = document.createElement('script') s.setAttribute('src', './vconsole.js') document.head.appendChild(s) // 修改meta信息,或者给html标签添加属性... // 此处省略一大坨代码...
浅谈vue2 单页面如何设置网页title

前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次.对于现在的前端框架,传统的每个页面设置title标签的做法是不行的. 推荐使用vue-wechat-title插件下载安装插件依赖 npm install vue-wechat-title --save 在main.js中引入插件 import VueWechatTitle from 'vu
vue 如何添加全局函数或全局变量以及单页面的title设置总结

传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu
使用vue-router设置每个页面的title方法

基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口
vue cli2.0单页面title修改方法

一.npm install vue-wechat-title --save 执行命令二.在main.js中添加 Vue.use(VueWechatTitle); Vue.config.productionTip= false 三.在router/index.js文件中添加 routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},],
Vue项目添加动态浏览器头部title的方法

0. 直接上预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面) ( 3 ) 设置 title (1)从路由router里面得到组件的title 在 router.beforeEach((to, from, next) => {} 里面 const browserHeaderTitle
vue中动态设置meta标签和title标签的方法

因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { t
vue+vue-meta-info动态设置meta标签教程

目录 vue-meta-info官方介绍 vue-meta-info使用在写移动端项目的时候,通常都会设置meta禁止用户缩放. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 最近的需求中,个别页面允许用户缩放,就需要给不同的页面设置不同的meta
vue中动态参数与计算属性的使用方法

一,动态参数从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr
vue中动态添加class类名的方法

vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2>     <p :class="{'p1'
在vue中动态修改css其中一个属性值操作

我就废话不多说了,大家还是直接看代码吧~ <template>  <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r
详解如何在Vue中动态添加类名

目录静态和动态类有条件的类名使用数组语法使用对象语法与自定义组件一起使用快速生成类名使用计算属性来简化类能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:
vue.js动态设置VueComponent高度遇到的问题及解决

目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list"> <div ref="abc">{{data.id}}</div> &
Vue中动态引入图片要是require的原因解析

目录 1.什么是静态资源 2. 为什么动态添加的src会被当做的静态的资源? 3. 没有进行编译,是指的是什么没有被编译? 4. 加上require为什么能正确的引入资源,是因为加上require就能编译了? 4.1 require是什么: 是一个node方法,用于引入模块,JSON或本地文件 4.2 调用require方法引入一张图片之后发生了什么: 5. 问题3中,静态的引入一张图片,没有使用require,为什么返回的依然是编译过后的文件地址? 6. 按照问题6中所说,那么动态添加src的
vue中动态select的使用方法示例

本文实例讲述了vue中动态select的使用方法.分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 <template> <div class="violationsList"> <div class="type-select"> <select name="selected" id="" v
在vue中动态添加class类进行显示隐藏实例

如下所示: <div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger">视频</el-button> </div>  <div class

vue中动态设置meta标签和title标签的方法

相关推荐

随机推荐