YESWEB 开发框架 路由配置文件 作用原理

路由配置 router/data.js

YESWEB  WEB开发框架 前端 VUE路由定义 在router/data.js 中配置

配置参考：

如果要了解详细的参数说明，前往 https://www.yesdotnet.com/archive/YESWEB/1618253355.html 

本节重点不是讲解参数配置，而是介绍路这个路由配置文件是如何被使用的

const routes = [
  {
    path: '/user',
    name: 'user',
    type: 'normal',
    title: '用户管理',
    defaultURLs: ['/api/microapps/user/search', '/api/microapps/user/get'],
    authorize: [{
        name: 'add',
        description: '新增',
        value: 1,
        urls: ['/api/microapps/user/create'],
      },
      {
        name: 'update',
        description: '编辑',
        value: 2,
        urls: ['/api/microapps/user/update'],
      },
      {
        name: 'delete',
        description: '删除',
        value: 4,
        urls: ['/api/microapps/user/delete'],
      },
      {
        name: 'resetpwd',
        description: '重置密码',
        value: 8,
        urls: ['/api/microapps/user/resetPwd'],
      },
      {
        name: 'setAuthorize',
        description: '权限设置',
        value: 16,
        urls: [
          '/api/microapps/ClientCode/GetDropDownDataSource',
          '/api/microapps/Authorize/treemenus',
          '/api/microapps/authorize/update',
        ],
      },
    ],
    component: () =>
      import( /* webpackChunkName: "user" */ '../views/user/index.vue'),
  }
]

module.exports = routes

生成 urls.json

运行命令 ，会生成url.json

npm run buildURLs

对应脚本 package.json 中

"scripts": {
    "buildURLs": "node buildUrl.js"
  },

具体生成操作

buildUrl.js

const { name } = require('./package.json')

const route = require('./src/router/data')
const fs = require('fs')

var datar = route.map((item) => {
  return {
    name: item.name,
    path: item.path,
    type:item.type,
    defaultURLs:item.defaultURLs,
    authorize:item.authorize
  }
})

var urls = {
  appName: name,
  routers: datar,
}

var file = './public/urls.json'

fs.writeFile(file, JSON.stringify(urls), (err) => {})

项目编译后，会生成 public/urls.json

该文件中包含了

模块编号 appName

模块中功能列表：routers 

主要是导入模块功能以及权限 作用

{
  "appName": "yesweb-core",
  "routers": [
    {
      "name": "user",
      "path": "/user",
      "type": "normal",
      "defaultURLs": ["/api/microapps/user/search", "/api/microapps/user/get"],
      "authorize": [
        {
          "name": "add",
          "description": "新增",
          "value": 1,
          "urls": ["/api/microapps/user/create"]
        },
        {
          "name": "update",
          "description": "编辑",
          "value": 2,
          "urls": ["/api/microapps/user/update"]
        },
        {
          "name": "delete",
          "description": "删除",
          "value": 4,
          "urls": ["/api/microapps/user/delete"]
        },
        {
          "name": "resetpwd",
          "description": "重置密码",
          "value": 8,
          "urls": ["/api/microapps/user/resetPwd"]
        },
        {
          "name": "setAuthorize",
          "description": "权限设置",
          "value": 16,
          "urls": [
            "/api/microapps/ClientCode/GetDropDownDataSource",
            "/api/microapps/Authorize/treemenus",
            "/api/microapps/authorize/update"
          ]
        }
      ]
    }
  ]
}

Vue-Router 路由加载

在 router/index.js 中也对 data.js 进行了引用

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'

Vue.use(VueRouter)


import urlD from './data'
var routes = urlD.map((item) => {
  return {
    name: item.name,
    path: item.path,
    meta: {
      title: item.title,
      noAuthorize: item.noAuthorize,
    },
    component: item.component,
  }
})
console.log(routes)
// debugger
export default routes

注册VUE-Router路由中需要使用