Vue-routes-helper NPM

项目介绍

根据*.vue物理路径生成vue routes，node运行即可. 运行后,会持续监听文件的变化(增删改)并更新路由, demo

安装

npm i vue-routes-helper -D

package.json

{
    ...
    "scripts":{
        "routes-helper": "node ./xxx/routes-helper.js"
    }
}

运行 npm run routes-helper 即可

原理

遍历监听文件夹下vue文件, 根据vue里的路由信息及物理路径生成路由数据
支持嵌套路由,自定义布局,自定义meta
监听页面所在文件夹, 如果相关路由信息发生改变(增/删/改),就修改对应的路由数据.
写入routes.js

说明

==只是监听文件夹,并生成routes数据文件, 不做其它处理==

自定义vue文件的路由信息, 配置ROUTER_DATA参数

<template>
    ...
</template>

<script>
/*
该vue被忽略, 不会被加入路由
ROUTER_DATA = false
// 自定义路由信息
ROUTER_DATA = {
  // Wrap来源于配置layoutViewPath文件夹里的文件名. 
  // 如果layout=false, 则该vue作为根节点.
  layout:'Wrap',
  // meta值, 该值会被赋值到route的meta 
  meta:{title:"标题a", icon:"test1", permission:["admin","user"]}
}
*/
    ...
</script>

项目文件结构

因为c.vue所在目录有文件夹c，所以d.vue和e.vue默认为c.vue的子路由(嵌套路由)。但如果d.vue或者e.vue指定了layout属性，那么就优先匹配自定义layout，就不是子路由了。

src
└-- layout
    |-- layout.vue
    |-- wrap.vue
    └-- one.vue
└-- views
    |-- a.vue
    |-- b.vue
    └-- c.vue
    └-- c
        |-- d.vue
        └-- e.vue

routes-helper.config.js, 注释就是配置说明.

const path = require("path")
const VueRoutesHelper = require("vue-routes-helper")
// 实例化
new VueRoutesHelper({
  // 保存路由数据js的地址(必要参数)
  output: path.resolve(__dirname, "./src/router/routes.js"),
  // routes.js可能导入的布局组件,仅被引用过的布局会被导入(必要参数)
  layoutViewPath: path.resolve(__dirname, "./src/layout"),
  // layoutViewPath目录下, 默认使用的layout(必要参数)
  defaultLayout: "layout.vue",
  // 需要监听并生成路由数据的文件夹(必要参数)
  viewPath: path.resolve(__dirname, "./src/views"),
  // viewPath对应的根路由(默认"/")
  baseUrl: "/",
  // 文件路径包含components的都会被忽略,默认值["components"]
  ignore: ["components"],
  // *.vue文件的meta值,该值会作为默认meta值
  defaultMeta: {
    title: "默认页面标题", permission: ["admin"]
  },
  // 如果路由数据更新了,是否在控制台打印消息
  log: true,
})

以上配置生成的 routes.js:

// 配置文件的layoutViewPath值, 该文件夹下的所有vue文件都可以被用做layout
import layout from "@/layout/layout" 

const routes = [
  {
    path: "/", // 配置参数里的baseUrl
    component: layout,  // 配置参数里的defaultLayout值,没有指定layout的vue就会使用该布局
    children: [
      {
        path: "a", // 根据文件物理路径生成
        component: () => import("@/views/a.vue"),  // "/src/views/a.vue" 对应的路由
        // vue没有自定义meta，那么就用配置里的defaultMeta值
        meta: { title: "默认页面标题", permission: ["admin"] }
      },
      {
        path: "b",  // 根据文件物理路径生成
        component: () => import("@/views/b.vue"),
        meta: { title: "b页面 title" }  // "/src/views/b.vue" 内采集的数据
      },
      {
        path: "c", // 根据文件物理路径生成
        component: () => import("@/views/c.vue"),
        meta: { "title": "目录cc" },  // "/src/views/c.vue" 内采集的数据
        children: [
          {
            path: "d", // 根据文件物理路径生成
            component: () => import("@/views/c/d.vue"),
            meta: { title: "d页面 title" }  // "/src/views/c/d.vue" 内采集的数据
          },
          {
            path: "e", // 根据文件物理路径生成
            component: () => import("@/views/c/e.vue"),
            meta: { title: "e页面 title" }  // "/src/views/c/e.vue" 内采集的数据
          }
        ]
      }
    ]
  }
]

export default routes