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路由中需要使用

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
管理员
评论列表

发表评论

评论内容
昵称:
关联文章

YESWEB 开发框架 配置文件 作用原理
配置
跳转以及参数处理
ASP.NET Core MVC中的约束
asp.net core MVC添加.html伪静态url时报错
vue 跳转的几种方式(带参数)
YESWeb开发框架软件截图
YES-WEB快速开发框架,.NET WEB开发平台,高效的web项目开发框架
YESWEB POS开发 Electron操作appdata配置信息
YESWEB开发框架 技术要求
.Net 下高性能分表分库组件-连接模式原理
YESWin Winform开发框架 项目初始化配置并运行
python四种配置文件
YESWEB开发框架 CLI使用
YESWin winform开发框架 模块功能注册配置
Python __name__=='__main__'作用详解
YESWEB开发框架,账套域名绑定
YES-WEB开发框架 VS中配置代码生成器快捷按钮
YESWEB项目 生产环境部署
YESWEB第三方业务模块数据库配置