工作台路由建立

src/components/bench-views/WorkCommon.vue

@@ -0,0 +1,61 @@
<template>
  <div class="main Site">
    <TheHeader></TheHeader>
    <div class="Site-content">
      <div class="contain-wrapper">
        <transition name="router-fade" mode="out-in">
          <keep-alive>
            <router-view :plat="plat"></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
    <TheFooter :plat="plat"></TheFooter>
  </div>
</template>
<script>
  import TheHeader from './WorkHead.vue';
  import TheFooter from '../main-views/TheFooter.vue';
  const ERR_OK = 0;
  export default {
    data() {
      return {
        plat: {}
      };
    },
    created() {
      this.$axios.get('./api/plat').then((res) => {
        // console.log(res);
        res = res.data;
        if (res.errno === ERR_OK) {
          this.plat = res.data;
        };
      });
    },
    components: {
      TheHeader,
      TheFooter
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .Site
    display: flex
    min-height: 100vh
    flex-direction: column
    .Site-content
      flex: 1
      padding-top:20px
      .router-fade-enter-active,
      .router-fade-leave-active
        transition: opacity 0.2s
      .router-fade-enter,
      .router-fade-leave-active
        opacity: 0
</style>

src/components/bench-views/WorkHead.vue

@@ -0,0 +1,77 @@
<template>
	<div class="workHeader">
		<div class="workHeaderWrapper">
				<ul class="workHeaderMain">
					<li>
						<a href="http://www.ekexiu.com" target="_blank" >
							<h1 class="kexiuLogo"></h1>
						</a>
					</li>
					<li>
						<div class="loginLogo">
							<img src="./img/home_icon_logo_orange.png"/>
						</div>
					</li>
				</ul>
		</div>
	</div>
</template>
<script>
	export default {
		
	}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin'
	.workHeader
	  .workHeaderWrapper
	    width:100%
	    height:60px
	    background:#fff
	    border-bottom:2px solid #e5e5e5
	    box-sizing:border-box
	    position:fixed
	    top:0
	    left:0
	    right:0
	    z-index:1000
	    font-size:16px
	    line-height:32px
	    display:flex
	    display:-webkit-flex
	    justify-content:center
	  .workHeaderMain
	    width:1100px
	    padding:0 10px
	    display:flex
	    display:-webkit-flex
	    justify-content:space-between
	    li
	      display:flex
	      display:-webkit-flex
	      align-items:center
		    .kexiuLogo
		      width:60px
		      height:30px
		      bg-image('./img/home_icon_logo_orange.png')
		      background-size:contain
		      overflow:hidden
		    .loginLogo
		      overflow:hidden
		      border:1px solid #e5e5e5
		      vertical-align:middle
		      text-align:center
		      cursor:pointer
		      border-radius:4px
		      display:table-cell
		      width:42px
		      height:42px
		      img
		        max-width:40px
		        max-height:100%
		        overflow-y:hidden
		        color:transparent  
</style>

src/components/bench-views/WorkHome.vue

@@ -0,0 +1,3 @@
<template>
	<div>我是工作台主页</div>
</template>

src/components/form-views/loginPlat.vue

@@ -1,35 +1,40 @@
<template>
  <div class="login">
    <div class="logo-wrapper"></div>
    <div class="form-wrapper">
      <form class="form-contain">
        <p class="form-title">登录平台工作台</p>
        <ul class="form-ul">
          <li>
            <input type="email" class="frmtype" hidden autocomplete="off"/>
            <input type="email" class="frmtype companyEmail" placeholder="请输入邮箱账号" autocomplete="off"/>
            <div class="frmmsg">333</div>
          </li>
          <li>
            <input type="password" class="frmtype" placeholder="请输入登录密码"/>
            <div class="frmmsg msgLog2"><span></span></div>
          </li>
          <li>
            <button type="button" disabled class="frmtype btnModel">登录</button>
            <router-link to="workBench">wwww</router-link>
            <router-link class="fontLink" to="">忘记密码？</router-link>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script>
  export default {
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import './style';
</style>
<template>
  <div class="login">
    <div class="logo-wrapper"></div>
    <div class="form-wrapper">
      <form class="form-contain">
        <p class="form-title">登录平台工作台</p>
        <ul class="form-ul">
          <li>
            <input type="email" class="frmtype" hidden autocomplete="off"/>
            <input type="email" class="frmtype companyEmail" placeholder="请输入邮箱账号" autocomplete="off"/>
            <div class="frmmsg">333</div>
          </li>
          <li>
            <input type="password" class="frmtype" placeholder="请输入登录密码"/>
            <div class="frmmsg msgLog2"><span></span></div>
          </li>
          <li>
            <button type="button" disabled class="frmtype btnModel" @click="login">登录</button>
            <router-link to="workBench">wwww</router-link>
            <router-link class="fontLink" to="">忘记密码？</router-link>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      login() {
          this.$router.push({path:'/WorkHome'});
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import './style';
</style>

src/router/router.js

@@ -1,74 +1,78 @@
import Main from '@/components/Main.vue';
// 全屏展示页面
export const loginRouter = {
    path: '/loginPlat',
    name: 'loginPlat',
    meta: {
        title: 'Login - 登录'
    },
    component: () => import('@/components/form-views/loginPlat.vue')
};
// 作为Main组件的子页面展示
export const otherRouter = {
  path: '/',
  name: 'otherRouter',
  redirect: '/home',
  component: Main,
  children: [
    { path: 'home',
      title: '首页',
      name: 'home_index',
      component: () => import('@/components/main-views/ViewHome.vue')
    },
    { path: 'platTrends',
      title: '平台动态',
      name: 'platTrends',
      component: () => import('@/components/main-views/ViewPlatTrend.vue')
    },
    { path: 'findServe',
      title: '找服务',
      name: 'findServe',
      component: () => import('@/components/main-views/ViewFindServe.vue')
    },
    { path: 'findResource',
      title: '找资源',
      name: 'findResource',
      component: () => import('@/components/main-views/ViewFindResource.vue')
    },
    { path: 'expertPool',
      title: '专家顾问',
      name: 'expertPool',
      component: () => import('@/components/main-views/ViewExpertPool.vue')
    },
    { path: 'cooperationAgency',
      title: '合作机构',
      name: 'cooperationAgency',
      component: () => import('@/components/main-views/ViewCooperationAgency.vue')
    },
    { path: 'aboutUs',
      title: '关于我们',
      name: 'aboutUs',
      component: () => import('@/components/main-views/ViewAboutUs.vue')
      // component: resolve => { require(['../components/ViewAboutUs.vue'], resolve); }
    },
    { path: 'workBench',
      title: '平台工作台',
      name: 'workBench',
      component: () => import('@/components/bench-views/ViewWorkBench.vue')
    }
  ]
};
// 作为工作台bench子页面展示
export const appRouter = [
];
// 所有上面定义的路由都要写在下面的routers里
export const routers = [
    loginRouter,
    otherRouter,
    ...appRouter
];
import Main from '@/components/Main.vue';
import WorkMain from '@/components/bench-views/WorkCommon.vue';
// 全屏展示页面
export const loginRouter = {
    path: '/loginPlat',
    name: 'loginPlat',
    meta: {
        title: 'Login - 登录'
    },
    component: () => import('@/components/form-views/loginPlat.vue')
};
// 作为Main组件的子页面展示
export const otherRouter = {
  path: '/',
  name: 'otherRouter',
  redirect: '/home',
  component: Main,
  children: [
    { path: 'home',
      title: '首页',
      name: 'home_index',
      component: () => import('@/components/main-views/ViewHome.vue')
    },
    { path: 'platTrends',
      title: '平台动态',
      name: 'platTrends',
      component: () => import('@/components/main-views/ViewPlatTrend.vue')
    },
    { path: 'findServe',
      title: '找服务',
      name: 'findServe',
      component: () => import('@/components/main-views/ViewFindServe.vue')
    },
    { path: 'findResource',
      title: '找资源',
      name: 'findResource',
      component: () => import('@/components/main-views/ViewFindResource.vue')
    },
    { path: 'expertPool',
      title: '专家顾问',
      name: 'expertPool',
      component: () => import('@/components/main-views/ViewExpertPool.vue')
    },
    { path: 'cooperationAgency',
      title: '合作机构',
      name: 'cooperationAgency',
      component: () => import('@/components/main-views/ViewCooperationAgency.vue')
    },
    { path: 'aboutUs',
      title: '关于我们',
      name: 'aboutUs',
      component: () => import('@/components/main-views/ViewAboutUs.vue')
      // component: resolve => { require(['../components/ViewAboutUs.vue'], resolve); }
    }
  ]
};
// 作为工作台bench子页面展示
export const appRouter ={
  path: '/',
  name: 'appRouter',
  component: WorkMain,
  children: [
    {
      path:  "WorkHome",
      titile:  '平台主页',
      component: () => import('@/components/bench-views/WorkHome.vue')
    }
  ]
}
// 所有上面定义的路由都要写在下面的routers里
export const routers = [
    loginRouter,
    otherRouter,
    appRouter
];