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 whiteSlideList = ['/', '/ui', '/siteList']; //侧边导航白名单
const whiteHeaderList = ['/', '/ui', '/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'
]; //头部导航白名单
const whiteFooterList = ['/', '/ui', '/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'
]; //底部白名单
const routes = [{
    path: '/',
    name: '首页',
    component: HomeView,
    // component: Franchise
  },
  {
    path: '/register',
    name: 'register',
    // 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: "register" */ '../views/Register.vue'),
    children: [ // 这是子路由的定义开始
      // {
      //   path: '', // 当访问 /user 时，默认加载 UserProfile 组件
      //   name: 'register',
      //   component: Register
      // },
      // {
      //   path: 'posts', // 当访问 /user/posts 时，加载 UserPosts 组件
      //   name: 'UserPosts',
      //   component: UserPosts,
      // }
    ]
  },
  {
    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')
  },
  {
    path: '/franchise',
    name: '加盟',
    component: () => import( /* webpackChunkName: "franchise" */ '../views/Franchise.vue')
  },
  {
    path: '/configureServicePrices',
    name: '配置服务价格',
    component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/ConfigureServicePrices.vue')
  },
  {
    path: '/siteList',
    name: '站点列表',
    component: () => import( /* webpackChunkName: "siteList" */ '../views/SiteList.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: '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: '/super/ranking/detail',
    name: '详情',
    component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankDetail.vue'),
    props: {rank_type: 1, type: 'day', showDateSelect: false}
  },
  {
    path: '/super/ranking/list',
    name: '列表',
    component: () => import( /* webpackChunkName: "Ranking" */ '../views/super/Ranking/RankList.vue'),
    props: {}
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to, from, next) => {
  console.log(to.path, 'to.path-----');
  if (whiteSlideList.includes(to.path)) {
    store.commit('SET_SIDEBAR', true); // 登录页面不显示侧边栏
  } else {
    store.commit('SET_SIDEBAR', false); // 其他页面显示侧边栏
  }
  if (whiteFooterList.includes(to.path)) {
    store.commit('SET_FOOTER', true); // 登录页面不显示侧边栏
  } else {
    store.commit('SET_FOOTER', false); // 其他页面显示侧边栏
  }
  if (whiteHeaderList.includes(to.path)) {
    store.commit('SET_HEADER', true); // 登录页面不显示侧边栏
  } else {
    store.commit('SET_HEADER', false); // 其他页面显示侧边栏
  }
  next();
});

export default router