vue动态修改标题

方法一：单独设置

document.title = "标题"

方法二：统一设置

const router = new Router({
  base: "/h5/",
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      meta:{title:"登录"},
      component: login
    },
  ]
})

router.beforeEach((to,from,next)=>{//beforeEach是router的钩子函数，在进入路由前执行
  if(to.meta.title){//判断是否有标题
      document.title = to.meta.title
  }
  next()  //执行进入路由，如果不写就不会进入目标页
})

export default router

方法三：使用vue-wechat-title

1.安装

npm install vue-wechat-title --save

2.使用

• 在main.js中引入

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

• 在router>index.js中添加meta对象配置title

const router = new Router({
  base: "/h5/",
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      meta:{title:"登录"},
      component: login
    }, 
  ]
})

• 在App.vue中修改router-view

<router-view v-wechat-title='$route.meta.title'></router-view>