使用vue-router的meta实现 设置每个页面的title标题

1.实现效果（左上角title变化）

2.核心代码：

1. 这里主要是 meta 属性下面设置一个自定义的键值 title
2. 在前置导航守卫里面如下：

router.beforeEach((to,from,next)=>{
  // 根据路由元信息设置文档标题
  window.document.title = to.meta.title || admin
  next()
})

3.完整的路由代码

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// 定义路由规则
export const routes = [
{
    path: '/sys',
    component: => import('@/views/layout/Layout'),
    meta: { title: '系统管理'},
    children: [
      {
        path: '/',
        redirect: '/home',
        component:  => import('@/views/sys/home/index'),
        meta: { title: '后台主页' }
      },
      {
        path: 'role',
        component: () => import('@/views/sys/role/index'),
        meta: { title: '角色管理' },
      },
      {
        path: 'tree',
        component: () => import('@/views/sys/tree/index'),
        meta: { title: '树状菜单' }
      },
      {
        path: 'department',
        component: () => import('@/views/sys/department/index'),
        meta: { title: '部门管理'}
      }
    ]
  },
]


const router = new Router({
  routes
})

// 路由前置导航守卫
router.beforeEach((to,from,next)=>{
  // 根据路由元信息设置文档标题
  window.document.title = to.meta.title || admin
  next()
})

export default router