vue-router-generator
功能:将项目文件自动转为相应的路由配置 和
Nuxt
的路由一样,可实现的功能可以参考这里
vue 路由自动生成插件
将传入的项目目录,自动转为 vue-router 的路由配置,component 使用异步加载
安装:npm i vue-router-auto -s
然后在 src/router/index.js 里面统一处理
// 引入依赖 Vue let routes =
基础路由
假设 views 的目录结构如下:
views/--| loginvue--| homevue--| user/-----| indexvue-----| editvue-----| infovue
那么,vue-router-auto 自动生成的路由配置如下:
name:'login' path:'/login' import'@/views/login.vue' name:'home' path:'/home' import'@/views/home.vue' name:'user' path:'/user' import'@/views/user/index.vue' name:'user-info' path:'/user/info' import'@/views/user/info.vue' name:'user-edit' path:'/user/edit' import'@/views/user/edit.vue'
嵌套路由
创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。
假设 views 的目录结构如下:
views/--| loginvue--| homevue--| home/-----| indexvue-----| aboutvue-----| productvue--| user/-----| indexvue-----| infovue
那么,vue-router-auto 自动生成的路由配置如下:
name:'login' path:'/login' import'@/views/login.vue' path:'/home' import'@/views/home.vue' children: name:'home-index' path:'' import'@/views/home/index.vue' name:'home-about' path:'about' import'@/views/home/about.vue' name:'home-product' path:'product' import'@/views/home/product.vue' name:'user' path:'/user' import'@/views/user/index.vue' name:'user-info' path:'/user/info' import'@/views/user/info.vue'
动态嵌套路由
假设 views 的目录结构如下:
views/--| loginvue--| homevue--| home/-----| _idvue-----| aboutvue--| user/-----| user-editvue
那么,vue-router-auto 自动生成的路由配置如下:
name:'login' path:'/login' import'@/views/login.vue' name:'home' path:'/home' import'@/views/home.vue' children: name:'home-id' path:':id' import'@/views/home/_id.vue' name:'home-about' path:'about' import'@/views/home/about.vue' name:'user-edit' path:'/user/edit' import'@/views/user/user-edit.vue'