Vue-设置动态页面标题

router.js文件配置

const router=new VueRouter({
    routes:[
      {
        path:'/',
        redirect:'/home',
      },
      {
        name:'home',
        path:'/home',
        component:Home
      },
      {
        path:'/detail/:id',
        component:Detail,
        meta:{
            title:'详情页'
        }
      },
      {
        path:'/about',
        component:About
      }
    ]
  })

router.beforeEach((to,from,next) => {
    document.title=to.meta.title
    next()
})

缺点：

1、title固定的（$route.meta.title），对于商品详情页展示不同的title无法满足需求

2、ios系统下部分app的webwiew不支持docuent.title

改进：

1、安装插件

cnpm i vue-wechat-title -D

2、引入插件

import VueWechatTitle from 'vue-wechat-title'

Vue.use(VueWechatTitle)

3、App.vue 建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!!