index.js 2.31 KB
import Vue from 'vue'
import VueRouter from 'vue-router'
import DefaultLayout from '@/layout/defaultLayout'
import portalRouter from './modules/portal'
import formRouter from './modules/form'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


Vue.use(VueRouter)


/**
 * hideInMenu:true 控制一级菜单不显示的标识
 * hideChildrenInMenu: true 控制子菜单不显示的标识
 * 
 * meta: {
 *  icon: 'form'  控制导航前面 是否显示图标
 *  title: '表单'  显示菜单名称
 * }
 */

// 不变常态路由
const constantRoutes = [
  {
    path: '/login',
    hideInMenu: true,
    component: { render: h => h("router-view") }, // 这步操作 可以少创建一个router-view的页面
    redirect: '/login',
    children: [
      {
        path: '/login',
        name: 'login',
        component: () => import(/* webpackChunkName: "login" */ '@/views/login'), // 登录
      }
    ]
  },
  {
    path: '*',
    hideInMenu: true,
    hidden: true,
    component: DefaultLayout,
    children: [{
      path: '404',
      name: '404',
      component: () => import(/* webpackChunkName: "404" */ '@/views/404') // 用户管理
    }]
  }
]

// 动态路由 可根据数据变更 且 导出 动态路由
export const asyncRoutes = [
  {
    path: '/',
    component: DefaultLayout,
    redirect: '/dashboard/home',
    children: [
      {
        path: '/dashboard',
        name: 'dashboard',
        exact: true,
        meta: {
          icon: 'dashboard',
          title: '仪表盘'
        },
        component: { render: h => h("router-view") },
        children: [
          {
            path: '/dashboard/home',
            name: 'home',
            exact: true,
            meta: {
              title: '首页'
            },
            component: () => import(/* webpackChunkName: "home" */ '@/views/dashboard/home.vue'), // 登录
          }
        ]
      },
      portalRouter,
      formRouter
    ]
  }
]

// 所有路由汇总
const routes = [].concat(asyncRoutes, constantRoutes)

// 初始化路由
const router = new VueRouter({
  base: process.env.BASE_URL,
  routes
})

// 前置路由
router.beforeEach((to, from, next) => {
  if (to.path !== from.path) {
    NProgress.start()
  }

  next()
})

// 后置路由
router.afterEach(() => {
  NProgress.done()
})

// 导出路由
export default router