Vue编写的html如何自动化,vue自动化路由的实现代码

目的

解放双手，从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时，无需多虑，router-auto是你的最优选择，它帮你解决路由的维护成本，你只需要创建相应的文件夹，路由就能动态生成，路由拦截你可以在main.js中去拦截他，总之比你想象的开发还要简单。

简要用法

具体用法请实时查看github或者npm，下面做一些简要用法介绍

引用

const RouterAuto = require('router-auto')

module.exports = {

entry: '...',

output: {},

module: {},

plugin:[

new RouterAuto()

]

}

项目结构

package.json 等等文件与目录

src 项目目录

page 页面目录

helloworld

Index.vue 页面入口

hello.vue 业务组件

router.js 额外配置

demo

test

Index.vue 页面入口

test.vue 业务组件

Index.vue 页面入口

home

Index.vue 页面入口

上面的目录结构生成的路由结构为

import Vue from 'vue'

import Router from 'vue-router'

import helloworld from '@/page/helloworld/Index.vue'

import demo from '@/page/demo/Index.vue'

import demo_test from '@/page/demo/test/Index.vue'

import home from '@/page/home/Index.vue'

Vue.use(Router)

export default new Router({

mode:'history',

base:'/auto/',

routes:[{

path: '/helloworld/index',

name: 'helloworld',

component: helloworld

},{

path: '/demo/index',

name: 'demo',

component: demo

},{

path: '/demo/test/index',

name: 'demo_test',

component: demo_test

},{

path: '/home/index',

name: 'home',

component: home

}]

})

初始化参数配置new RouterAuto(options = {})

参数

说明

类型

默认值

必填项

contentBase

根目录即src平级目录

String

当前根目录process.cwd()

否

mode

router中mode

String

history

否

base

router中base

String

/auto/

否

watcher

是否启用热更新(请在dev环境启用)

Boolean

false

否

小缺陷

首先我们的项目不需要子路由，所以都是平铺路由，但是你可以文件夹中创建文件夹在用文件夹规划子路由，后续会升级几个版本加入进去，当然看看使用了和需求，伪需求都砍掉

现在生成的.router.js文件在磁盘中，作者以后进一步优化放到内存中，一步一个脚印，共创大好河山

然后就没缺陷了.... 希望提issue越多越好

本文参考与相关内容地址

邮箱 ngaiwe@126.com

github进来单击star,作者给你么么哒！

issue百因必有果，你的报应就是我

nuxt源码参考

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。