YuHuaTai-Mobile/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import RelicsAppr from "@/views/RelicsAppr.vue"
import RelicDetail from "@/components/RelicDetail.vue"
import SwkkFadeIn from "@/views/SwkkFadeIn.vue"
import SwkkView from "@/views/SwkkView.vue"
import ObliqueView from "@/views/ObliqueView.vue"
import PanoView from "@/views/PanoView.vue"
import PanoList from "@/components/PanoList.vue"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'HomeView',
    component: HomeView,
    beforeEnter (to, from, next) {
      const audioNode = document.getElementById('global-audio')
      // audioNode.pause()
      if (from.name && audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.homeView}.mp3`)) {
        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.homeView}.mp3`)
        audioNode.play()
      }
      if (!from.name) {
        globalApi.recordVisit()
      }
      next()
    }
  },
  {
    path: '/swkk-fade-in',
    name: 'SwkkFadeIn',
    component: SwkkFadeIn,
    meta: {
      isShowBottomBar: false,
      canFullScreen: false,
    }
  },
  {
    path: '/swkk-view',
    name: 'SwkkView',
    component: SwkkView,
    meta: {
      isShowBottomBar: true,
      canFullScreen: true,
    },
    beforeEnter (to, from, next) {
      if (from.name === 'HomeView') {
        // 从首页过来的，需要reload。此时location还没有变。
        let shabi = to.fullPath
        location.hash = shabi
        location.reload()
      } else {
        // 无论是从首页还是从不同楼层过来，导致reload。
        const audioNode = document.getElementById('global-audio')
        if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.swkkView}.mp3`)) {
          audioNode.src = require(`@/assets/audios/${globalConfig.audioName.swkkView}.mp3`)
          audioNode.play()
        }
        next()
      }
    },
  },
  {
    path: '/oblique-view',
    name: 'ObliqueView',
    component: ObliqueView,
    meta: {
      isShowBottomBar: true,
      canFullScreen: true,
    },
    children: [
      {
        path: '/pano-list',
        name: 'PanoList',
        component: PanoList,
        meta: {
          isShowBottomBar: false,
          canFullScreen: false,
        },
        beforeEnter(to, from, next) {
          const audioNode = document.getElementById('global-audio')
          if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.obliqueAndPano}.mp3`)) {
            audioNode.src = require(`@/assets/audios/${globalConfig.audioName.obliqueAndPano}.mp3`)
            audioNode.play()
          }
          next()
        }
      },
    ],
  },
  {
    path: '/pano-view',
    name: 'PanoView',
    component: PanoView,
    meta: {
      isShowBottomBar: true,
      canFullScreen: true,
    },
    children: [
      {
        path: '/pano-list',
        name: 'PanoList',
        component: PanoList,
        meta: {
          isShowBottomBar: false,
          canFullScreen: false,
        }
      },
    ],
  },
  {
    path: '/relics-appr',
    name: 'RelicsAppr',
    component: RelicsAppr,
    meta: {
      isShowBottomBar: true,
      canFullScreen: false,
    },
    children: [
      {
        path: '/relic-detail',
        name: 'RelicDetail',
        component: RelicDetail,
        meta: {
          isShowBottomBar: true,
          canFullScreen: false,
        }
      },
    ],
    beforeEnter (to, from, next) {
      const audioNode = document.getElementById('global-audio')
      if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)) {
        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)
        audioNode.play()
      }
      next()
    },
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

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

router.beforeEach((to, from, next) => {
  console.log('beforeEach: ', to, from, next)
  // 强制每次都从首页进入
  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView' && to.name !== 'SwkkView') {
    next('/')
  } else {
    next()
  }
})

export default router