ShouBo/webM/src/router/index.js

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' },
      },
      // Exhibitions页面
      {
        path: '/Layout/Exhibitions',
        name: 'Exhibitions',
        component: () => import('../views/Exhibitions/index.vue'),
        meta: { myTitle: 'Exhibitions', topColor: '#bf8a6d' },
        redirect: { name: 'ExCurrent' },
        children: [
          // 二级路由子页面
          {
            path: '/Layout/Exhibitions/Current',
            name: 'ExCurrent',
            component: () => import('../views/Exhibitions/Current.vue'),
            meta: { myTitle: 'Exhibitions', topColor: '#bf8a6d' },
          },
          {
            path: '/Layout/Exhibitions/Permanent',
            name: 'ExPermanent',
            component: () => import('../views/Exhibitions/Permanent.vue'),
            meta: { myTitle: 'Exhibitions', topColor: '#bf8a6d' },
          },
          {
            path: '/Layout/Exhibitions/Past',
            name: 'ExPast',
            component: () => import('../views/Exhibitions/Past.vue'),
            meta: { myTitle: 'Exhibitions', topColor: '#bf8a6d' },
          },
          {
            path: '/Layout/Exhibitions/Overseas',
            name: 'ExOverseas',
            component: () => import('../views/Exhibitions/Overseas.vue'),
            meta: { myTitle: 'Exhibitions', topColor: '#bf8a6d' },
          },
        ]
      },
      //---------- 详情
      {
        path: '/Layout/Detail',
        name: 'ExDetail',
        component: () => import('../views/Exhibitions/Detail.vue'),
        meta: { myTitle: 'Exhibitions', topColor: '#801c20' },
      },
      // ----------Objects
      {
        path: '/Layout/Objects',
        name: 'ExObjects',
        component: () => import('../views/Exhibitions/Objects.vue'),
        meta: { myTitle: 'Exhibitions', topColor: '#801c20' },
      },
      // ----------Galleries
      {
        path: '/Layout/Galleries',
        name: 'ExGalleries',
        component: () => import('../views/Exhibitions/Galleries.vue'),
        meta: { myTitle: 'Exhibitions', topColor: '#801c20' },
      },
      // Collections页面
      {
        path: '/Layout/Collections',
        name: 'Collections',
        component: () => import('../views/Collections/index.vue'),
        meta: { myTitle: 'Collections', topColor: '#b09c86' },
      },
      {
        path: '/Layout/Collections/:id',
        name: 'CollectionsInfo',
        component: () => import('../views/Collections/info.vue'),
        meta: { myTitle: 'Collections', topColor: '#36382f' },
      },
      {
        path: '/Layout/CollectionsDetail',
        name: 'CollectionsDetail',
        component: () => import('../views/Collections/Detail.vue'),
        meta: { myTitle: 'Collections', topColor: '#656567' },
      },
      // Learn页面
      {
        path: '/Layout/Learn',
        name: 'Learn',
        component: () => import('../views/Learn/index.vue'),
        meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
        redirect: { name: 'LearnStudents' },
        children: [
          // 二级路由子页面
          {
            path: '/Layout/Learn/Students',
            name: 'LearnStudents',
            component: () => import('../views/Learn/Students.vue'),
            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
          },
          {
            path: '/Layout/Learn/Adults',
            name: 'LearnAdults',
            component: () => import('../views/Learn/Adults.vue'),
            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
          },
          {
            path: '/Layout/Learn/Families',
            name: 'LearnFamilies',
            component: () => import('../views/Learn/Families.vue'),
            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
          },
        ]
      },
      {
        path: '/Layout/Learn/Info',
        name: 'LearnInfo',
        component: () => import('../views/Learn/info.vue'),
        meta: { myTitle: 'Learn & Engage', topColor: '#764032' },
      },
      // Publications页面
      {
        path: '/Layout/Publications',
        name: 'Publications',
        component: () => import('../views/Publications/index.vue'),
        meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
        redirect: { name: 'PuMagazines' },
        children: [
          // 二级路由子页面
          {
            path: '/Layout/Publications/Magazines',
            name: 'PuMagazines',
            component: () => import('../views/Publications/Magazines.vue'),
            meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
          },
          {
            path: '/Layout/Publications/Catalogues',
            name: 'PuCatalogues',
            component: () => import('../views/Publications/Catalogues.vue'),
            meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
          },
        ]
      },
      // -------------info
      {
        path: '/Layout/Publications/Info',
        name: 'PublicationsInfo',
        component: () => import('../views/Publications/info.vue'),
        meta: { myTitle: 'Publications', topColor: 'rgba(110,148,141,.9)' },
      },
      //pdf
      {
        path: '/Layout/Publications/Pdf',
        name: 'PublicationsPdf',
        component: () => import('../views/Publications/lookPdf.vue'),
        meta: { myTitle: 'Publications', topColor: '#74120b' },
      },
      // Join & Support页面
      {
        path: '/Layout/Join',
        name: 'Join',
        component: () => import('../views/Join/index.vue'),
        meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
        redirect: { name: 'JoinVo' },
        children: [
          // 二级路由子页面
          {
            path: '/Layout/Join/Volunteer',
            name: 'JoinVo',
            component: () => import('../views/Join/Volunteer.vue'),
            meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
          },
          {
            path: '/Layout/Join/Give',
            name: 'JoinGi',
            component: () => import('../views/Join/Give.vue'),
            meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
          },
        ]
      },
      // -------------info
      {
        path: '/Layout/Join/Info',
        name: 'JoinInfo',
        component: () => import('../views/Join/info.vue'),
        meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
      },
    ]
  }
]

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