如何在vue中实现自动化路由

这期内容当中小编将会给大家带来有关如何在vue中实现自动化路由，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

目的

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

router-auto github地址有帮助的可以star一下

router-auto npm地址欢迎提issue实现效果

简要用法

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

引用

const RouterAuto = require('router-auto')

module.exports = {
  entry: '...',
  output: {},
  module: {},
  plugin:[
    new RouterAuto()
  ]
}

项目结构

package.json 等等文件与目录
src 项目目录

• page 页面目录

• Index.vue 页面入口

• test

• Index.vue 页面入口

• Index.vue 页面入口

• test.vue 业务组件

• Index.vue 页面入口

• hello.vue 业务组件

• router.js 额外配置

• helloworld

• demo

• home

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

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 = {})

小缺陷

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

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

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

上述就是小编为大家分享的如何在vue中实现自动化路由了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。