YFYC-H5/src/router/index.js

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

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'home',
    component: () => import('../views/Home/index.vue'),
    meta: {
      myTitle: '建筑可阅读'
    },
  },
  // 语音讲解
  {
    path: '/goods/audio',
    name: 'goodsAudio',
    component: () => import('../views/Goods/components/GoodsAudio.vue')
  },
  // vr看看
  {
    path: '/goods/kankan',
    name: 'goodsKankan',
    component: () => import('../views/Goods/components/GoodsKankan.vue')
  },
  // vr全景
  {
    path: '/goods/vr',
    name: 'goodsVr',
    component: () => import('../views/Goods/components/GoodsVr.vue')
  },
  // 景点导航
  {
    path: '/goods/map',
    name: 'goodsMap',
    component: () => import('../views/Goods/components/GoodsMap.vue')
  },
  // 游玩指引
  {
    path: '/goods/play',
    name: 'goodsPlay',
    component: () => import('../views/Goods/components/GoodsPlay.vue')
  },
    // 分享
    {
      path: '/goods/share',
      name: 'goodsShare',
      component: () => import('../views/Goods/components/GoodsShare.vue')
    },
  // 悦·互动发布
  {
    path: '/layout/interact/issue',
    name: 'interactIssue',
    meta: {
      myTitle: '建筑可对话发布'
    },
    component: () => import('../views/Interact/components/InteractIssue.vue')
  },
    // 悦·互动详情
    {
      path: '/layout/interact/info',
      name: 'InteractInfo',
      meta: {
        myTitle: '建筑可对话详情'
      },
      component: () => import('../views/Interact/components/InteractInfo.vue')
    },
  // 定位，位置
  {
    path: '/layout/interact/location',
    name: 'interactLocation',
    meta: {
      myTitle: '位置'
    },
    component: () => import('../views/Interact/components/interactLocation.vue')
  }, {
    path: '/layout',
    name: 'layout',
    component: () => import('../views/Layout/index.vue'),
    children: [{
        path: '/layout/construct',
        name: 'construct',
        meta: {
          myInd: 1,
          myTitle: '古建一张图'
        },
        component: () => import('../views/Construct/index.vue')
      },
      {
        path: '/layout/list',
        name: 'HomeList',
        meta: {
          myInd: 1,
          myTitle: '景点建筑'
        },
        component: () => import('../views/Construct/components/HomeList.vue')
      },
      {
        path: '/layout/goods',
        name: 'goods',
        meta: {
          myInd: 1,
        },
        component: () => import('../views/Goods/index.vue')
      },

      /**
       * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       * 享服务（建筑可游玩）
       */
      {
        path: '/layout/serve',
        name: 'serve',
        meta: {
          myInd: 2,
          myTitle: '建筑可游玩',
        },
        component: () => import('../views/Serve/index.vue')
      },
      {
        path: '/layout/serve/recommended-path',
        name: 'RecommendedPath',
        meta: {
          myInd: 2,
          myTitle: '推荐路线',
        },
        component: () => import('../views/Serve/RecommendedPath.vue')
      },
      {
        path: '/layout/serve/recommended-path-detail',
        name: 'RecommendedPathDetail',
        meta: {
          myInd: 2,
          myTitle: '一日游',
        },
        component: () => import('../views/Serve/RecommendedPathDetail.vue')
      },
      {
        path: '/layout/serve/dont-miss',
        name: 'DontMiss',
        meta: {
          myInd: 2,
          myTitle: '必玩景点',
        },
        component: () => import('../views/Serve/DontMiss.vue')
      },
      {
        path: '/layout/serve/travel-plague',
        name: 'TravelPlague',
        meta: {
          myInd: 2,
          myTitle: '景点开放',
        },
        component: () => import('../views/Serve/TravelPlague.vue')
      },
      {
        path: '/layout/serve/help-center',
        name: 'HelpCenter',
        meta: {
          myInd: 2,
          myTitle: '帮助中心',
        },
        component: () => import('../views/Serve/HelpCenter.vue')
      },
      {
        path: '/layout/serve/hotel-list',
        name: 'HotelList',
        meta: {
          myInd: 2,
          myTitle: '酒店',
        },
        component: () => import('../views/Serve/HotelList.vue')
      },
      {
        path: '/layout/serve/hotel-detail',
        name: 'HotelDetail',
        meta: {
          myInd: 2,
          myTitle: '',
        },
        component: () => import('../views/Serve/HotelDetail.vue')
      },
      {
        path: '/layout/serve/food-list',
        name: 'FoodList',
        meta: {
          myInd: 2,
          myTitle: '美食',
        },
        component: () => import('../views/Serve/FoodList.vue')
      },
      {
        path: '/layout/serve/food-detail',
        name: 'FoodDetail',
        meta: {
          myInd: 2,
          myTitle: '美食',
        },
        component: () => import('../views/Serve/FoodDetail.vue')
      },
      /**
       * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       */
      {
        path: '/layout/interact',
        name: 'interact',
        meta: {
          myInd: 3,
          myTitle: '建筑可对话'
        },
        component: () => import('../views/Interact/index.vue')
      },
      /**
       * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
       */
      {
        path: '/layout/my',
        name: 'my',
        meta: {
          myInd: 4,
          myTitle: '',
        },
        component: () => import('../views/My/index.vue')
      },
      {
        path: '/layout/my/feedback',
        name: 'Feedback',
        meta: {
          myInd: 4,
          myTitle: '投诉建议',
        },
        component: () => import('../views/My/Feedback.vue')
      },
      {
        path: '/layout/my/my-bookings',
        name: 'MyBookings',
        meta: {
          myInd: 4,
          myTitle: '我的预约',
        },
        component: () => import('../views/My/MyBookings.vue')
      },
    ]
  },
]

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

})

export default router