import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: () => import('../views/Layout/index.vue'),
    redirect: { name: 'Home' },
    children: [
      // 首页
      {
        path: '/Layout/Home',
        name: 'Home',
        component: () => import('../views/Home/index.vue'),
        meta: { myTitle: 'Capital Museum.China', topColor: '#74120b' },
      },
      // Visit页面
      {
        path: '/Layout/Visit/:id',
        name: 'Visit',
        component: () => import('../views/Visit/index.vue'),
        meta: { myTitle: 'Visit', topColor: '#c3ac8d' },
      },
      {
        path: '/Layout/VisitInfo',
        name: 'VisitInfo',
        component: () => import('../views/Visit/VisitInfo.vue'),
        meta: { myTitle: 'Reservation', topColor: '#c3ac8d' },
      },
    ]
  }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 导航守卫，回到页面顶部
router.beforeEach((to, from, next) => {
  setTimeout(() => {
    let dom = document.querySelector('.Layout')
    dom.scrollTop = 0
  }, 100);
  next()
})


// 全局后置钩子，设置title
router.afterEach(to => {
  // 设置title
  document.title = to.meta.myTitle;
})


export default router