H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue动态修改route里的meta属性 !求解答~~1

动态修改router里的meta属性;

router.js
{
  path:'/detail',
  meta:{
    title:'详情',
    isnavbar:false,
    istabbar:false
  },
  components:()=>import('xxx.vue')
}
路由配置

默认route.js的meta里的配置;

App.vue
<navbar v-if="$route.meta.isnavbar" :title="$route.meta.title">
<section>
  <router-view/>
</section>
<tabbar v-if="$route.meta.istabbar" />

这是在app.vue页面,统一的一个头部和底部导航

detail.vue

<template>

</template>
<script>
export default {
  name:'detail',
  data(){
    return {
      title:''
    }
  },
  methods:{
   getDetail(){
    axios.get(xxxx).
    then(res=>{
        this.title = res.data.title;
    })
   }
  },
  create(){
    this.getDetail()
  },
  mounted(){
    this.$route.meta.title = this.title
  }
}
</script>

这里说一下,进入detail页面后navbar的title默认是’详情’,发送数据请求,获取到后端返回的title,保存到data里,然后在修改route.meta.title 为 this.title
这里在vue开发工具里能看到route.meta.title改变了,但是页面navbar里的title并没有更新。~ 求解!~

回答:

在created钩子函数中修改路由元信息。

回答:

更改title使用document.title = 'title'

本文地址:H5W3 » vue动态修改route里的meta属性 !求解答~~1

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址