kuailelunwen_new_houtai/src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../store';
import HomeView from '../views/HomeView.vue';
// import UserPosts from '../views/UserPosts.vue';
// import Franchise from '../views/Franchise.vue'

Vue.use(VueRouter)
const blackSliderList = [
  '/register'
]; 
const first_child_router = [
  '/','/agent/siteList'
]
// const whiteSlideList = ['/', '/ui', 
//   '/agent/siteList', 
//   '/agent/siteBaseSetting', 
//   '/agent/siteSemSetting',
//   '/siteBaseSetting',
//   '/sitePersonalization'
// ]; //侧边导航白名单
// const whiteHeaderList = ['/', '/ui', '/agent/siteList', '/register', '/configureServicePrices', '/siteList','/siteSetting/siteBaseSetting','/siteSetting/sitePersonalization'
//   ,'/siteSetting/siteH5','/siteSetting/siteSem','/pageTemplete','/demo',
//   '/super/ranking/yearProfit', '/super/ranking/monthProfit', '/super/ranking/checkProfit', '/super/ranking/checkOrdernum',
//   '/super/ranking/checkRefund', '/super/ranking/agentProfit', '/super/ranking/agentRecharge', '/super/ranking/agentNew',
//   '/super/ranking/purchase','/super/ranking/stagePurchase','/super/ranking/loss'
// ]; //头部导航白名单
//头部导航黑名单 不需要添加头部的放置在这里，其余默认显示头部
const blackHeaderList = [
]; 
//底部白名单 暂时废弃，在页面独立添加组件
// const whiteFooterList = ['/', '/ui', '/agent/siteList', '/configureServicePrices',
//   '/super/ranking/yearProfit', '/super/ranking/monthProfit', '/super/ranking/checkProfit', '/super/ranking/checkOrdernum',
//   '/super/ranking/checkRefund', '/super/ranking/agentProfit', '/super/ranking/agentRecharge', '/super/ranking/agentNew',
//   '/super/ranking/purchase','/super/ranking/stagePurchase','/super/ranking/loss'
// ]; 
const blackFooterList = [
  '/'
]; 
const routes = [{
    path: '/',
    name: '首页',
    component: HomeView,
    meta: { 
      title: '首页',
      hideBreadcrumb: true // 首页不显示面包屑
    }
  },
  {
    path: '/register',
    name: 'register',
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "register" */ '../views/Register.vue'),
  },
  {
    path: '/ui',
    name: 'ui组件',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "ui" */ '../views/elementGroups.vue'),
    meta: { 
      title: '公共组件示例',
      hideBreadcrumb: true, // 一级页面不显示面包屑
      // breadcrumbParent:'首页'
    }
  },
  {
    path: '/agent/siteList',
    name: '站点列表',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteList.vue'),
    meta: { 
      title: '站点列表',
      breadcrumbParent:'首页',
      hideBreadcrumb: true // 一级页面不显示面包屑
    }
  },
  {
    path: '/siteBaseSetting',
    name: '站点基础设置',
    component: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue'),
    meta: { 
      title: '站点设置',
      breadcrumbParent: '站点列表' // 手动指定父级
      // r如果想隐藏中间层级
      // breadcrumbParent: '首页', // 跳过医生信息
      // hideInBreadcrumb: true // 可选：隐藏当前项
    }
  },
  {
    path: '/sitePersonalization',
    name: '个性化设置',
    component: () => import( /* webpackChunkName: "sitePersonalization" */ '../views/SitePersonalization.vue'),
    meta: { 
      title: '站点设置',
      breadcrumbParent: '站点列表' // 手动指定父级
    }
  },
  // {
  //   path: '/agent/siteBaseSetting',
  //   name: '站点基本设置',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteBaseSetting.vue')
  // },
  // {
  //   path: '/agent/siteSemSetting',
  //   name: '营销推广',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteSemSetting.vue')
  // },
  {
    path: '/franchise',
    name: '加盟',
    component: () => import( /* webpackChunkName: "franchise" */ '../views/Franchise.vue')
  },
  {
    path: '/configureServicePrices',
    name: '配置服务价格',
    component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/ConfigureServicePrices.vue')
  },
  {
    path: '/siteSetting',
    name: '站点设置',
    component: () => import( /* webpackChunkName: "SiteSetting" */ '../views/SiteSetting.vue'),
    children: [
      {
        path: '', // 默认子路由
        redirect: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue') // 重定向到第一个页面
      },
      // {
      //   path: 'siteBaseSetting',
      //   name: '站点基础设置',
      //   component: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue'),
      // },
      // {
      //   path: 'sitePersonalization',
      //   name: '个性化设置',
      //   component: () => import( /* webpackChunkName: "sitePersonalization" */ '../views/SitePersonalization.vue')
      // },
      {
        path: 'siteH5',
        name: '移动端设置',
        component: () => import( /* webpackChunkName: "siteH5" */ '../views/SiteH5.vue')
      },
      {
        path: 'siteSem',
        name: '营销推广',
        component: () => import( /* webpackChunkName: "siteSem" */ '../views/SiteSem.vue')
      },
      {
        path: 'demoTable', // 默认子路由
        name: '测试页面',
        redirect: () => import( /* webpackChunkName: "demoTable" */ '../views/DemoTable.vue') // 重定向到第一个页面
      },
    ]
  },
  {
    path: '/pageTemplete',
    name: '网页模板',
    component: () => import( /* webpackChunkName: "pageTemplete" */ '../views/PageTemplete.vue')
  },
  // {
  //   path: '/demo',
  //   name: 'demo页面',
  //   component: () => import( /* webpackChunkName: "Demo" */ '../views/Demo.vue'),
  //   children: [
  //     {
  //       path: '', // 默认子路由
  //       redirect: () => import( /* webpackChunkName: "DemoTable" */ '../views/DemoTable.vue') // 重定向到第一个页面
  //     },
  //   ]
  // }

  {
    path: '/super/ranking',
    component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/Ranking.vue'),
    children: [
      {
        path: '', // 默认子路由
        redirect: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
        props: {pageTitle:'总利润 - 年排行', rank_type: 1, type: 'year', showDateSelect: false}
      },
      {
        path: 'yearProfit',
        name: '年排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
        props: {pageTitle:'总利润 - 年排行', rank_type: 1, type: 'year', showDateSelect: false}
      },
      {
        path: 'monthProfit',
        name: '月排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
        props: {pageTitle:'总利润 - 月排行', rank_type: 1, type: 'month', showDateSelect: true}
      },
      {
        path: 'checkProfit',
        name: '产品毛利润排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'产品 - 毛利润排行', rank_type: 1, type: 'check_type'}
      },
      {
        path: 'checkOrdernum',
        name: '产品订单数排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'产品 - 订单数排行', rank_type: 2, type: 'check_type'}
      },
      {
        path: 'checkRefund',
        name: '产品退单数排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
        props: {pageTitle:'产品 - 退单数排行', rank_type: 3, type: 'check_type'}
      },
      {
        path: 'loss',
        name: '产品负毛利排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
        props: {pageTitle:'产品 - 负毛利排行', rank_type: 5, type: 'loss'}
      },
      {
        path: 'agentProfit',
        name: '代理商毛利润排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'代理商 - 毛利润排行', rank_type: 1, type: 'agent'}
      },
      {
        path: 'agentRecharge',
        name: '代理商充值排行',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankBatchList.vue'),
        props: {pageTitle:'代理商 - 充值排行', rank_type: 4, type: 'agent'}
      },
      {
        path: 'agentNew',
        name: '代理商新加盟',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
        props: {pageTitle:'代理商 - 新加盟', type: 'agentnew', showDateSelect: false}
      },
      {
        path: 'purchase',
        name: '采购价',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/Purchase.vue'),
        props: {pageTitle:'设置 - 采购价', type: 'purchase'}
      },
      {
        path: 'stagePurchase',
        name: '阶段采购价',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/Purchase.vue'),
        props: {pageTitle:'设置 - 阶段采购', type: 'stagePurchase'}
      },
      {
        path: 'detail',
        name: '详情',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
        props: {pageTitle:'详情', type: 'day', showDateSelect: false, lookMore:false}
      },
      {
        path: 'list',
        name: '列表',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
        props: {pageTitle:'详情', showDateSelect: false, lookMore:false}
      },
      {
        path: 'order',
        name: '订单统计',
        component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
        props: {pageTitle:'订单统计', type: 'order', showDateSelect: false}
      },
    ]
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to, from, next) => {
 
  if (blackSliderList.includes(to.path)) {
    store.commit('SET_SIDEBAR', false); // 登录页面显示侧边栏
  } else {
    if(first_child_router.includes(to.path)){//所有一级路由都为非自定义侧边栏
      store.commit('SET_CUSTOMIZE', false); 
      store.commit('SET_SLIDER_MENU','menuData'); 
    }
    store.commit('SET_SIDEBAR', true); // 其他页面不显示侧边栏
  }
  if (blackFooterList.includes(to.path)) {
    store.commit('SET_FOOTER', false); // 页面不显示底部
  } else {
    store.commit('SET_FOOTER', true); // 其他页面显示底部
  }
  if (blackHeaderList.includes(to.path)) {
    store.commit('SET_HEADER', false); // 不显示顶部
  } else {
    store.commit('SET_HEADER', true); // 其他页面显示顶部
  }
  store.dispatch('showLoading')
  next();
});
router.afterEach(() => {
  // 添加延迟确保过渡效果
  setTimeout(() => {
    store.dispatch('hideLoading')
  }, 300)
})

export default router