路由拆分

1.airlink.js

/*
 * @Author: oouyang
 * @Date: 2021-05-18 11:05:46
 * @LastEditTime: 2021-07-29 09:48:15
 * @LastEditors: Please set LastEditors
 * @Description: airLink路由配置---待定
 * @FilePath: \shiva-trtms-air-service-web\src\router\modules\airlink.js
 */
import Layout from "@/layout"

const airLinkRouter = {
    path: "/airlink",
    component: Layout,
    redirect: "/airLink/resourceManage",
    name: "airLink",
    meta: {
        title: "资需管理(一级)",
        code: "resourceManage(basp)",
        icon: "table"
    },
    children: [
        {
            path: "resourceManage",
            component: () => import("@/views/airLink/resourceManage.vue"),
            name: "resourceManage",
            meta: { title: "资需管理", code: "resourceManage", noCache: false }
        },
    ]
}

const controlManageRouter = {
    path: "/controlManage",
    component: Layout,
    redirect: "/controlManage/exceptionManage",
    name: "controlManage",
    meta: {
        title: "调度管理",
        code: "controlManage",
        icon: "table"
    },
    children: [
        {
            path: "exceptionManage",
            component: () => import("@/views/airLink/exceptionManage.vue"),
            name: "exceptionManage",
            meta: { title: "异常管理", code: "exceptionManage", noCache: false }
        },
        {
            path: "except",
            component: () => import("@/views/airLink/except.vue"),
            name: "except",
            meta: { title: "异常管理", code: "except", noCache: false }
        },
        {
            path: "commandManage",
            component: () => import("@/views/airLink/commandManage.vue"),
            name: "commandManage",
            meta: { title: "调令管理", code: "commandManage", noCache: false }
        },
    ]
}

const bookingDemandManageRouter = {
    path: "/bookingDemandManage",
    component: Layout,
    redirect: "/bookingDemandManage/bookingDemand",
    name: "bookingDemandManage",
    meta: {
        title: "订舱需求管理",
        code: "bookingDemandManage",
        icon: "table"
    },
    children: [
        {
            path: "bookingDemand",
            component: () => import("@/views/airLink/bookingDemand.vue"),
            name: "bookingDemand",
            meta: { title: "订舱需求操作", code: "bookingDemand", noCache: false }
        },
        {
            path: "networkConfig",
            component: () => import("@/views/airLink/networkConfig.vue"),
            name: "networkConfig",
            meta: { title: "操作网点班次映射配置表", code: "networkConfig", noCache: false }
        },
        {
            path: "destCityConfig",
            component: () => import("@/views/airLink/destCityConfig.vue"),
            name: "destCityConfig",
            meta: { title: "目的城市发运配置表", code: "destCityConfig", noCache: false }
        },
        {
            path: "directionConfig",
            component: () => import("@/views/airLink/directionConfig.vue"),
            name: "directionConfig",
            meta: { title: "长期缺口流向解决方案配置", code: "directionConfig", noCache: false }
        },
    ]
}

const bookingManageRouter = {
    path: "/bookingManage",
    component: Layout,
    redirect: "/bookingManage/bookingInteraction",
    name: "bookingManage",
    meta: {
        title: "订舱管理",
        code: "bookingManage",
        icon: "table"
    },
    children: [
        {
            path: "bookingInteraction",
            component: () => import("@/views/airLink/bookingInteraction.vue"),
            name: "bookingInteraction ",
            meta: { title: "订舱交互", code: "bookingInteraction", noCache: false }
        },
        {
            path: "bookingLog",
            component: () => import("@/views/airLink/bookingLog.vue"),
            name: "bookingLog ",
            meta: { title: "订舱计算日志", code: "bookingLog", noCache: false }
        },
        {
            path: "truckConfig",
            component: () => import("@/views/airLink/truckConfig.vue"),
            name: "truckConfig",
            meta: { title: "拉货率参考配置", code: "truckConfig", noCache: false }
        },
    ]
}
export default { airLinkRouter, controlManageRouter, bookingDemandManageRouter, bookingManageRouter }

2.route目录下index.js

import Vue from 'vue'
import Router from 'vue-router'
/**
 * 重写路由的push方法
 */
const routerReplace = Router.prototype.replace
Router.prototype.replace = function replace(location) {
    return routerReplace.call(this, location).catch(error => error)
}
Vue.use(Router)

/* Layout */
import Layout from '@/layout'
import baspRouter from './modules/basp'
import dictRouter from './modules/dict'
import reportManageRouter from "./modules/reportManage"
import airLinkRouter from "./modules/airlink"
/**
 * hidden: true                   如果设置为true,路由对应项将不会在左侧菜单展示(默认是false)
 * redirect: noRedirect           设置重定向地址,如果是根目录不对应可视页面的时候一定要设置为其子目录中的某一个页面绝对地址
 * name:'router-name'             路由名字在<keep-alive>中会被使用 (必须设置,且不能重复)
 * meta : {
    title: 'title'               左侧菜单栏和面包屑,tab标签页中的名字 (如果有对应的页面那么必填)
    code: 'code'                     跟后台接口返回的菜单列表中的moduleCode要匹配,才能按照权限显示菜单 
    icon: 'svg-name'             菜单栏的图标
    noCache: true                如果设置为true,页面将不会缓存(默认是false)
    affix: true                  如果设置为true,将会一直显示在tags-view
    breadcrumb: false            如果设置为false, 该项将不会出现在 面包屑(默认是true)
    activeMenu: '/example/list'  如果设置了路径, 菜单栏将会 高亮该项路由层级对应的菜单项(一般用于由某个(如列表)页面的超链接打开某个(如新增或者编辑)页面,该页面不在左侧边的菜单栏,这时候需要高亮显示前一个(列表页面)菜单)
    parentPathName: '/test1/test2'  当有二级及以上router-view层级时候,需要设置当前页面的上面多级目录的回溯路径一直到Layout根组件下一层
  }
 */

/**
 * constantRoutes
 * 基础无权限可任意访问的页面路由配置
 */
export const constantRoutes = [
    {
        path: '/redirect',
        component: Layout,
        hidden: true,
        children: [
            {
                path: '/redirect/:path*',
                component: () => import('@/views/redirect/index')
            }
        ]
    },
    {
        path: '/',
        component: Layout,
        hidden: true,
        redirect: '/home',
        children: [{
            path: 'home',
            component: () => import('@/views/home/index'),
            name: 'home',
            meta: {
                title: '主页',
                icon: 'dashboard',
                code: 'home',
                affix: true   //是否永远不关闭
            }
        }]
    },
    /* {
        path: '/test',
        component: Layout,
        redirect: '/test/test1/test1-page1',
        name: 'test',
        meta: {
            title: '测试模块',
            icon: '404'
        },
        children: [{
            path: 'test1',
            component: () => import('@/views/test/test1'),
            redirect: '/test/test1/test1-page1',
            name: 'test1',
            meta: { title: '测试1', icon: '404' },
            children: [{
                path: 'test1-page1',
                component: () => import('@/views/test/test1/page1'),
                name: 'test1-page1',
                meta: { title: '测试1-页面1', parentPathName: '/test1' },
            }, {
                path: 'test1-page2',
                component: () => import('@/views/test/test1/page2'),
                name: 'test1-page2',
                meta: { title: '测试1-页面2', parentPathName: '/test1' },
            }]
        }]
    }, */
    // dictRouter.marketCollectionRouter,
    // reportManageRouter.reportManageRouter,

    // airLinkRouter.bookingDemandManageRouter,
    //airLinkRouter.bookingManageRouter
    //airLinkRouter.controlManageRouter
]
/**
 * asyncRoutes
 * 需要根据后台返回的菜单列表权限而访问的路由页面配置
 * 配置在这里的模块才会去查询按钮权限
 */
export const asyncRoutes = [
    airLinkRouter.airLinkRouter,
    reportManageRouter.reportManageRouter,
    airLinkRouter.controlManageRouter,
    airLinkRouter.bookingDemandManageRouter,
    airLinkRouter.bookingManageRouter,
    baspRouter.baspSystemManageRouter,
    baspRouter.baspAcountManageRouter,
    baspRouter.backstageManageRouter,
    dictRouter.marketCollectionRouter,
]

const createRouter = () => new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({
        y: 0
    }),
    routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // reset router
}

export default router

 

上一篇:从零开始学VUE之VueRouter(导航守卫)


下一篇:26.利用路由导航守卫改变页面的title