Vue-动态改变浏览器title

第一步:找到Vue的路由文件router.js(vue2.0在router目录下index.js)

将红色线框内的代码修改为: const router = new Router({}),如下图:

修改前:

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/Register'
    }
]

 

修改后:

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/Register'
    }
]

 

第二步:在路由文件的最底部加入以下代码:

//路由修改浏览器标题
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})
export default router

第三步:在需要设置标题的路由项中加入meta对象，对象中包含一个title属性，该属性是用来设置浏览器title的

举个例子:

{
      name: 'home',
      path: '/Home',
      component: Home,
      meta: {
        keepAlive: true,
        title: '德云在线 - 首页'
      }
    },

这样一来就解决了但也应用只有一个标题的问题，动态处理配置了浏览器title