vue如何动态修改meta的title

目录
  • 如何动态修改meta的title
  • 动态修改路由的meta.title
    • 需求
    • 解决办法

如何动态修改meta的title

需求：不去掉原生导航栏的情况下实现详情页的动态title（列表页query携带参数name到详情页实现动态title）

@on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})"

列表页点击携带name到详情页职位详情页的title,并且赋值给router里面的meta的title，然后绑定到原生的document.title上！

created(){
         this.category_id = this.$route.query.id;//列表的详情id
         this.$route.meta.title = this.$route.query.name;//列表的名称
         document.title = this.$route.meta.title;
    }

注意：一开始的逻辑是直接拿到name赋值到原生document.title上！但是这样路由跳转可能会有meta的title会出现空值的状态，需要点击两次才出现页面的动态title，如果点击第二次会出现上一次的title，因为第二次的点击没有经过router.js！

router.afterEach((to, from, next) => {
  if (to.path === '/yunCrm' && to.query.name) {
  to.meta.title = to.query.name;
  document.title = to.meta.title;
  }
});

router.js里面需要实现路由的判断，因为页面的title值最终的是显示的是meta里面的title，而不是query携带过来的name，有点绕，一开始是直接赋值，但是会出现空值现象，也感谢朋友的帮助与提醒！！！

注：首先得使用to.query.name来接收列表页传来的真实值再赋值给最终显示的to.meta.title！！

动态修改路由的meta.title

需求

从一级页面跳转到多个二级页面，发现二级页面大体相同，只有面包屑的title不一样

解决办法

在二级页面使用beforeRouteEnter查看从那个按钮跳转过来

一级页面：index.vue

// 批量启用\批量停用操作
    toPage(item) {
      this.$router.push({path: '/equipment/distribute/batch',query: {type: item}})
    },

二级页面：batch.vue

beforeRouteEnter:(to,from,next) => {
    if(to.query.type == 'start') {
      to.meta.title = '批量启用'
    }else if(to.query.type == 'stop') {
      to.meta.title = '批量停用'
    }
    next()
    console.log(to,'tttt')
  },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    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设置每个页面的title与meta信息

    title: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 #文章页面上的显示名称,一般是中文 date: 2019-11-20 16:30:16 #文章生成时间,一般不改,当然也可以任意修改 categories: vue #分类 tags: [vue] #文章标签,可空,多标签请用格式,注意:后面有个空格 description: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 如需使用 vue-meta-

  • 聊聊Vue 中 title 的动态修改问题

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一直是万年不变的 vue-project.理所应当的,这个问题被测试爸爸提了一个大大的缺陷. 犯了错的我赶紧解决这个问题,但是经过一段时间的摸索,我却发现,这一个小小的问题,却有着很多不同的解法. 首先,毫无疑问的是,我们应该使用 document.title 方法通过 DOM 操作来修改 title

  • vue如何动态修改meta的title

    vue如何动态修改meta的title

    目录 如何动态修改meta的title 动态修改路由的meta.title 需求 解决办法 如何动态修改meta的title 需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页query携带参数name到详情页实现动态title) @on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})" 列表页点击携带name到详情页职位详情页的title,并且赋值给route

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • vue中动态修改animation效果无效问题详情

    目录 问题描述 问题原因 解决办法 1.将 keyframes 下的内容放到 scoped 的外边 2.去掉scoped 问题描述 鼠标移入移出,并没有出现闪动: <template> <div class="alarmIcon" ref="alarmIcon" @mouseenter="handleEnter" @mouseleave="handleLeave" ></div> </

  • vue如何动态修改$router参数

    目录 vue动态修改$router参数 动态修改router路由所带参数 vue动态修改$router参数 // 创建一个包含当前 URL 参数的对象 export const getURLParameters = (url) =>   (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(     (a, v) => (       (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf

  • Vue如何动态修改el-table的某列数据

    Vue如何动态修改el-table的某列数据

    目录 动态修改el-table的某列数据 设置el-table某一列点击出现输入框可以编辑 动态修改el-table的某列数据 1.对话框打开时调用函数open@opened="checked" 2.可编辑 <el-table-column     -------- visEdit="true"       > 3.同步选中的数据List:multipleSelection ,函数  checked: function () 设置el-table某一列点

  • vue+vue-meta-info动态设置meta标签教程

    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

  • javascript修改浏览器title方法 JS动态修改浏览器标题

    title在html中属于特殊的节点元素.因为它可以使用document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用document.getElementsByTagName("title")[0].innerHtml用更改它的值.经测试原生js有两种方式可以修改,jQuery中也能简单设置.不清楚的小伙伴们可以了解一下. innerText 方式 通过console.log(document.getEle

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

随机推荐