# createroute-webpack-plugin

> 根据目录结构自动生成vue路由

Latest version **1.0.5** (published 2019-03-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install createroute-webpack-plugin
pnpm add createroute-webpack-plugin
yarn add createroute-webpack-plugin
bun add createroute-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-03-12 |
| First published | 2018-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | leeleeleev |

## Links

- npm: https://www.npmjs.com/package/createroute-webpack-plugin
- npm.io page: https://npm.io/package/createroute-webpack-plugin

## Dependencies (5)

- [glob](https://npm.io/package/glob.md) ^7.1.3
- [pify](https://npm.io/package/pify.md) ^4.0.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [chokidar](https://npm.io/package/chokidar.md) ^2.0.4
- [fs-extra](https://npm.io/package/fs-extra.md) ^7.0.0

## Recent versions

- 1.0.5 (latest) — 2019-03-12
- 1.0.4 — 2019-02-23
- 1.0.3 — 2018-12-17
- 1.0.2 — 2018-12-12
- 1.0.1 — 2018-11-29
- 1.0.0 — 2018-11-28

## README

# create-route
![](https://img.shields.io/appveyor/ci/gruntjs/grunt.svg)
![](https://img.shields.io/badge/npm-v1.0.5-green.svg)

## 使用
![image](https://pic3.zhuanstatic.com/zhuanzh/n_v24595d76146fd4ea7b52b9b0cedd24d8f.png)
```
plugins: [
  new CreateRoute({
    pagesDir: 'src/view', // vue页面位置
    output: 'src/routes.js', // 输出路由文件位置
    mixin: { // 定义混入属性
      'l': {
        meta: {
          auth: true
        }
      }
    }
  })
]
```

### 生成routes.js文件
```
export default [
	{
		path: "/test",
		component: () => import("./view/test.vue"),
		name: "test"
	},
	{
		path: "/double-11",
		component: () => import("./view/double-11/index.vue"),
		name: "double-11_index"
	},
	{
		path: "/404",
		component: () => import("./view/404.vue"),
		name: "404"
	},
	{
		path: "/double-11/draw",
		component: () => import("./view/double-11/draw l.vue"),
		meta: {"auth":true},
		name: "double-11_draw"
	},
	{
		path: "/double-11/result",
		component: () => import("./view/double-11/result.vue"),
		name: "double-11_result"
	}
]
```

## 删除路由

在文件夹或者vue文件名前加"!"符号

## 首页路由

在文件夹里有'index.vue'文件时，被认为是该路由首页，路由中不显示'index'

## 动态路由
当文件以'_'开头时，被认为是动态路由，文件名为params

## 嵌套路由
当文件中vue文件与子文件夹名字相同时，被认为是嵌套路由，该vue组件里需有"<router-view></router-view>"作为父组件

![image](https://pic2.zhuanstatic.com/zhuanzh/n_v2c1ee88ecdb614713925f62476ae7eef9.png)

```
export default [
	{
		path: "/test",
		component: () => import("./view/test.vue"),
		children: [
			{
				path: "",
				component: () => import("./view/test/index.vue"),
				name: "test_index"
			},
			{
				path: "a",
				component: () => import("./view/test/a.vue"),
				children: [
					{
						path: "",
						component: () => import("./view/test/a/index.vue"),
						name: "test_a_index"
					},
					{
						path: "b",
						component: () => import("./view/test/a/b.vue"),
						name: "test_a_b"
					}
				]
			},
			{
				path: ":id?",
				component: () => import("./view/test/_id.vue"),
				name: "test_id"
			}
		]
	},
	{
		path: "/404",
		component: () => import("./view/404.vue"),
		name: "404"
	}
]
```

## 混入属性
在mixin中定义的混入属性，在生成路由时，会判断文件名里是否有改属性的key，（用空格分开）如果有，则将改属性混入路由属性中
```
mixin: {
  'l': {
    meta: {
      auth: true
    }
  }
}
```
文件路径： 'src/view//double-11/draw l.vue'，生成文件：
```
{
	path: "/double-11/draw",
	component: () => import("./view/double-11/draw l.vue"),
	meta: {"auth":true},
	name: "double-11_draw"
}
```

---
_Source: https://npm.io/package/createroute-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._