vue路由

区分登录页面（不含有公共的侧边栏和顶部导航），和普通页面（含有公共的侧边栏和顶部导航）

• router 下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import person from '@/components/person'
import workcheck from '@/components/workcheck'
import account from '@/components/account'
import login from '@/components/login'
import home from '@/components/home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    },
    {
      path: '/home',
      name: 'home',
      component: home,
      children: [
        {
          path: '/person',
          name: 'person',
          component: person
        }, {
          path: '/workcheck',
          name: 'workcheck',
          component: workcheck
        }, {
          path: '/account',
          name: 'account',
          component: account
        }
      ]
    }
  ]
})

• app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

• home.vue（公共的页面）

<template>
<div id="home">
    <div class="app_top">
        <img src="../assets/images/logo.png" alt="">
        <div>
            <img src="../assets/images/signout.png" alt="" class="img_signout">
            <div class="sign_out">
                <div class="triangle_border_up">
                    <span></span>
                </div>
                <p @click="signOut">退出</p>
            </div>
        </div>
    </div>
    <leftmenu></leftmenu>
    <router-view></router-view>
</div>
</template>

<script>
import leftmenu from '../components/leftMenu'
export default {
    name: "home",
    components: {
        leftmenu: leftmenu
    },
    methods: {
        signOut () {
            this.$router.push({ path: '/' });
        }
    }
}
</script>

<style scoped>
    #home >div {
        float: left;
    }
    #home .app_top {
        width: 94.3%;
        height:52px;
        background: #303030;
        color: #fff;
        line-height:52px;
        padding:0 3.7% 0 2%;
    }
    #home .app_top img:nth-of-type(1) {
        margin-top:8px;
    }
    #home .app_top >div {
        float:right;
        margin-top:4px;
        overflow: auto;
        text-align: end;
    }
    #home .sign_out {
        width: 100px;
        height: 30px;
        line-height: 30px;
        background: #666666;
        position: relative;
        text-align: center;
        font-size: 14px;
        z-index: 1;
        display: none;
    }
    #home .sign_out p {
        cursor: pointer;
    }
    #home .triangle_border_up{
        width:0;
        height:0;
        border-width:0 5px 5px;
        border-style:solid;
        border-color:transparent transparent #666666;/*透明 透明  灰*/
        margin:0px auto;
        position:absolute;
        top: -5px;
        right: 10px;
    }
    .img_signout {
        cursor: pointer;
    }
    #home .app_top >div:hover .sign_out {
        display: block !important;
    }
</style>

文件目录

• src
  • assets
  • components
    • leftmenu.vue // 左侧导航
    • home.vue // 公共页面
    • person.vue
    • account.vue
    • workcheck.vue
  • router
    • index.js // 路由
  • app.vue
  • main.js