mall-web-ssr/layouts/main.vue

<template>
  <div id="main">
    <header-view v-if="!isMobile"></header-view>
    <main-header v-if="!isMobile"></main-header>
    <main-nav v-if="!isMobile"></main-nav>
    <mobile-header v-if="isMobile"></mobile-header>
    <nuxt/>
    <footer-view v-if="!isMobile"></footer-view>
    <right-bar v-if="!isMobile"></right-bar>
    <mobile-footer v-else></mobile-footer>
  </div>
</template>
<script>
  import { Header, Footer, RightBar } from '~components/default'
  import { MainHeader, MainNav } from '~components/main'
  import { MobileHeader, MobileFooter } from '~components/mobile'
  export default {
    name: 'main',
    components: {
      HeaderView: Header,
      FooterView: Footer,
      RightBar,
      MainHeader,
      MainNav,
      MobileHeader,
      MobileFooter
    },
    computed: {
      isMobile: function () {
        return this.$store.state.option.isMobile
      }
    }
//    data () {
//      return {
//        url: window.location.href
//      }
//    },
//    watch: {
//      url: function (val, oldVal) {
//        console.log(val)
//      }
//    }
  }
</script>