vue及vue-router程序的title修改

因为vue控制的是body部分,所以没法修改header里的title这个比较麻烦而且不美观.

现在新的 vue-router 可以解决这个问题了.用钩子方法来做.

//这是钩子进入页面之前,就修改title
router.beforeEach((to, from, next) => {
  document.title = to.meta.title    //这 to.meta.title 是在router里设置的
  next()
})

这是vue-router设置

const routers = [{
    path: '/',
    meta: {
        title: '后台登录'   //这个就是上面设置
    },
    component: (resolve) => require(['./views/login.vue'], resolve)
},{
    path: '/main',
    meta: {
        title: '后台管理中心' //这个是title标题
    },
    component: (resolve) => require(['./views/main.vue'], resolve)

}];

参考文档

vue-router2.0设置title