这期内容当中小编将会给大家带来有关如何在vue中实现自动化路由，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
10年积累的
成都网站制作、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
网站设计制作后付款的网站建设流程，更有
平武免费网站建设让你可以放心的选择与我们合作。为什么要使用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 = {})
| 参数 | 说明 | 类型 | 默认值 | 必填项 |
|---|
| contentBase | 根目录即src平级目录 | String | 当前根目录process.cwd() | 否 |
| mode | router中mode | String | history | 否 |
| base | router中base | String | /auto/ | 否 |
| watcher | 是否启用热更新(请在dev环境启用) | Boolean | false | 否 |
小缺陷
上述就是小编为大家分享的如何在vue中实现自动化路由了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
文章名称：如何在vue中实现自动化路由-创新互联
转载注明：
http://cdkjz.cn/article/dgdshc.html
