VUE(二)•公共組件

Header.vue

<template>
  <div>
    <Menu mode="horizontal" :theme="theme1" active-name="1">
      <MenuItem name="1">
        <Icon type="ios-paper"/>
        內容管理
      </MenuItem>
      <MenuItem name="2">
        <Icon type="ios-people"/>
        用戶管理
      </MenuItem>
      <Submenu name="3">
        <template slot="title">
          <Icon type="ios-stats"/>
          統計分析
        </template>
        <MenuGroup title="使用">
          <MenuItem name="3-1">新增和啓動</MenuItem>
          <MenuItem name="3-2">活躍分析</MenuItem>
          <MenuItem name="3-3">時段分析</MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
          <MenuItem name="3-4">用戶留存</MenuItem>
          <MenuItem name="3-5">流失用戶</MenuItem>
        </MenuGroup>
      </Submenu>
      <MenuItem name="4">
        <Icon type="ios-construct"/>
        綜合設置
      </MenuItem>
    </Menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        theme1: 'light'
      }
    }
  }
</script>

<style scoped>

</style>

 

Lateral.vue

<template>
  <div style="margin-left: -50px">
      <Menu :theme="theme2" active-name="1-2" :open-names="['1']">
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-paper"/>
            內容管理
          </template>
          <MenuItem name="1-1">文章管理</MenuItem>
          <MenuItem name="1-2">評論管理</MenuItem>
          <MenuItem name="1-3">舉報管理</MenuItem>
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-people"/>
            用戶管理
          </template>
          <MenuItem name="2-1">新增用戶</MenuItem>
          <MenuItem name="2-2">活躍用戶</MenuItem>
        </Submenu>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-stats"/>
            統計分析
          </template>
          <MenuGroup title="使用">
            <MenuItem name="3-1">新增和啓動</MenuItem>
            <MenuItem name="3-2">活躍分析</MenuItem>
            <MenuItem name="3-3">時段分析</MenuItem>
          </MenuGroup>
          <MenuGroup title="留存">
            <MenuItem name="3-4">用戶留存</MenuItem>
            <MenuItem name="3-5">流失用戶</MenuItem>
          </MenuGroup>
        </Submenu>
      </Menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        theme2: 'light'
      }
    }
  }
</script>

<style scoped>

</style>

 

Footer.vue

<template>

  <p>© 2019XXXXXX</p>

</template>

<script>
  export default {
    name: "Footer"
  }
</script>

<style scoped>

</style>

 

 

APP.vue

<template>
  <div id="app">
    <div class="layout" v-if="$route.meta.keepAlive">
      <Layout>
        <Header class="header">
          <Header></Header>
        </Header>

        <Layout>
          <Sider hide-trigger class="lateral">
            <Lateral></Lateral>
          </Sider>

          <Content class="content">
            <router-view></router-view>
          </Content>

        </Layout>
        <Footer class="footer">
          <Footer>
            Footer
          </Footer>
        </Footer>


      </Layout>
    </div>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
  import Header from './components/Header'
  import Lateral from './components/Lateral'
  import Footer from './components/Footer'

  export default {
    name: 'App',

    components: {
      Header,
      Lateral,
      Footer,
    },
    data() {
      return {}
    },

  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    /*color: #2c3e50;*/

    /*margin-top: 60px;*/

    /*底部樣式*/
    min-height: 100%;
    position: relative;
  }


  /*底部樣式*/
  * {
    margin: 0;
    padding: 0;
  }

  body,
  html {
    height: 100%;
  }

  .footer {
    height: 25px;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  /*底部樣式 END*/

  .lateral {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    background-color: #fff;
  }

  .content {
    margin-left: 200px;
  }
</style>

 

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
      meta: {
        keepAlive: false
      }
    },

    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        requireAuth: true,
        keepAlive: true
      }
    },

    {
      path: '/test',
      name: 'test',
      component: Test,
      meta: {
        requireAuth: true,
        keepAlive: false
      }
    },


  ]
})