技術標籤：vue2.xvuesaas專案架構

此篇幅主要介紹、我是如何做路由的配置和路由常量的抽離，如有不足和建議請留言，在此感謝，專案目前階段還處在少年，一直在迭代，路由版本目前為v1.0.0

路由目錄結構如圖

├──router # 路由相關所有檔案

││──modules # 以一級選單命名的模組檔案

││──_import_xxxx.ts # 開發、生產環境的配置

││──common.ts # 500、404、403、401等頁面的路由配置

││──constant.ts # 常量相關

│└──index.ts # 核心配置檔案

由於業務頁面都是基於Layout佈局，這裡就簡單介紹下我們的Layout佈局、如下圖，一級在頂部，二級及二級以下在側邊

接下來，會根據每個模組列舉一個例項

• modules 資料夾下會有諸多的如下檔案page01.ts、page02.ts、page03.ts、page04.ts、page05.ts、index.ts

1. page01.ts

import { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
import { page01Constant } from '../constant'

const _import = require('../_import_' + process.env.NODE_ENV)

const page01Router: RouteConfig =  {
  path: '/page01',
  component: Layout,
  redirect: '/page01/index',
  meta: {
    activeMenu: page01Constant.mainLevel,
    sort: page01Constant.sort,                    
    title: '瀏覽器標籤上顯示的標題',
  },
  children: [
    {
      path: '/page01/index',
      component: _import('page01Center/index'),
      name: 'index',
      meta: {
        activeMenu: page01Constant.oneLevel,
        title: '瀏覽器標籤上顯示的標題',
        icon: 'page01Icon',
        width: '20',
        height: '18',
        hidden: false
      },
    }, {
      path: '/page01/child',
      component: _import('page01Center/page01Child'),
      name: 'child',
      meta: {
        activeMenu: page01Constant.twoLevel,
        title: '瀏覽器標籤上顯示的標題',
        icon: 'page01ChildIcon',
        width: '20',
        height: '20',
        hidden: false
      },
    }
  ]
}

export default page01Router
 

2. index.ts

/**
* @param directory 要搜尋的資料夾目錄不能是變數，否則在編譯階段無法定位目錄
* @return 
  function 返回一個具有 resolve, keys, id 三個屬性的方法
  resolve() 它返回請求被解析後得到的模組 id
  keys() 它返回一個數組，由所有符合上下文模組處理的請求組成。 
  id 是上下文模組裡面所包含的模組 id. 它可能在你使用 module.hot.accept 的時候被用到
*/

const files = require.context('.', false, /\.ts$/)

let operateRouterConfig: any = []

files.keys().forEach((key: string) => {
  if (key === './index.ts') { return }
  operateRouterConfig = operateRouterConfig
    .concat(files(key).default)
    .sort((a: any, b: any) => a.meta.sort ? (a.meta.sort - b.meta.sort) : -1)
    
})

export default operateRouterConfig
 

• _import_xxxx.ts 配置檔案

1. _import_development.ts 使用require配置，非同步載入-元件非同步載入即為路由的非同步載入

module.exports = (file: string) => require(`@/views/${file}.vue`).default 

2. _import_production.ts 使用import配置，懶載入方式，用更加簡單的寫法來組織Vue非同步元件和Webpack的程式碼分隔

module.exports = (file: string) => () => import(`@/views/${file}.vue`)

• common.ts異常狀態頁面的路由配置

import { RouteConfig } from 'vue-router'
const _import = require('./_import_' + process.env.NODE_ENV)

export const commonRouterConfig: RouteConfig[] = [
  {
    path: '/404',
    name: '404',
    meta: {
      title: '404',
    },
    component: _import('errorPage/404')
  },
  { path: '*', redirect: '/404'},
]

export default commonRouterConfig

• constant.ts 常量配置檔案

由於業務變動，會新增一級模組，無法控制以後模組排序，如實抽離出這麼一個常量配置檔案，不管產品如何改變(作怪)，修改起來都是分分鐘的事情

export const page01Constant = {
  sort: 1,
  mainLevel: '1',
  oneLevel: '1-1',
  twoLevel: '1-2',
} 

• index.ts 核心配置檔案

import Vue from 'vue'
import Router from 'vue-router';
import RouterConfig from './modules'           // 業務路由 模組
import commonRouterConfig from './common'      // 公共路由

Vue.use(Router)

const originalPush = Router.prototype.push

Router.prototype.push = function push( location: any) {
  return (originalPush.call(this, location) as any).catch((err: any) => err)
}

const scrollBehavior = (savedPosition: any) => {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

const router = new Router({
  scrollBehavior,
  base: process.env.BASE_URL,
  routes: RouterConfig.concat(commonRouterConfig)
})

export default router

到此，router配置相關-文章結束，原創不易，感謝瀏覽！