import Vue from 'vue';
import Router from 'vue-router';
import CompanyList from '@/views/Company/List';
import CompanyDetail from '@/views/Company/Detail';
import ExpertList from '@/views/Expert/List';
import ExpertDetail from '@/views/Expert/Detail';
import ServiceBussiness from '@/views/Service/Bussiness';
import ServiceEngineer from
 
 '@/views/Service/Engineer';
import ServiceProduction from '@/views/Service/Production';
import ServiceTechnology from '@/views/Service/Technology';

Vue.use(Router);

const company = {
  template: `
    <div class="conpany">
    <!-- <router-view> --> //原來沒有加keepAlive的寫法
    **<keep-alive color="red"
 
>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>**
    </div>
  `
};
const expert = {
  template: `
    <div class="expert">
    **<keep-alive>
      <router-view v-if
 
="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>**
    </div>
  `
};

const serviceS = {
  template: `
    <div class="service">
      <router-view/>
    </div>
  `
};

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/expert/list',
    },
    {
      path: '/company',
      component: company,
      children: [
        {
          path: 'list',
          name: 'list',
          component: CompanyList,
          **meta: { // 加了keepAlive後新增的
            keepAlive: true
          }**
        },
        {
          path: 'detail/:id',
          name: 'detail',
          component: CompanyDetail
        }
      ]
    },
    {
      path: '/expert',
      name: 'expertList',
      component: expert,
      children: [
        {
          path: 'list',
          name: 'list',
          component: ExpertList,
          meta: {
            keepAlive: true
          }
        },
        {
          path: 'detail/:id',
          name: 'expertDetail',
          component: ExpertDetail
        }
      ]
    },
    {
      path: '/service',
      component: serviceS,
      children: [
        {
          path: 'bussiness',
          name: 'list',
          component: ServiceBussiness
        },
        {
          path: 'engineer',
          name: 'engineer',
          component: ServiceEngineer
        },
        {
          path: 'production',
          name: 'production',
          component: ServiceProduction
        },
        {
          path: 'technology',
          name: 'technology',
          component: ServiceTechnology
        }
      ]
    }
  ]
});

給列表加了keepAlive ，這樣點選某一頁的時候，進入詳情頁，按後退按鈕，返回的是該頁