vue-router-automation
v2.3.1
Published
提供了vue项目的路由自动化,匹配所有.vue文件,剔除APP.vue入口文件
Downloads
47
Maintainers
Readme
安装本项目
npm i vue-router-automation
项目说明
本项目基于webpack提供了一个context方法来获取到目录下的所有文件,我们可以通过require.context方法拿到我们想要的指定文件夹下所有的vue文件。 基于webpack的vue2/vue3项目都可以使用本项目,只需要在router/index.js文件中导入vue-router-automation,然后调用Sroutes方法即可。
参数说明
| 序号 | 内容 | |--|--| | 参数1 | 第一个参数是根路由指向文件 | | 参数2 | 第二个参数是路由meta默认自定义信息,默认为{} |
使用说明
1、基础使用
// 在router/index.js文件使用,将包导入router/index.js文件中
// 导入
const R=require('vue-router-automation');
// 路由生成
const routers=R.Sroutes('views/index',{});
// 导出生成的路由,将生成的路由添加到vue-router中
const routes = R.routes;
const router = new VueRouter({
routes
})
2.进阶使用(路由信息自定义)
// 在router/index.js文件使用,将包导入router/index.js文件中
// 导入
const R=require('vue-router-automation');
// 注意:当需要添加自定义meta信息时,第二个meta参数,必须填写默认信息,不能为{}。
// 路由生成
const routers=R.Sroutes('views/index',{header:true,footer:true});
// 导出生成的路由,将生成的路由添加到vue-router中
const routes = R.routes;
const router = new VueRouter({
routes
})
// 通过路由守卫进行路由定制化,自定义meta等信息
router.beforeEach((to,form,next)=>{
//当前路由
const Rpath=to.path;
//定制化路由集合
let Rarry=[
"/",
"/curriculum/view",
"/news/view"
];
//添加路由自定义信息
Rarry.forEach(item=>{
if (Rpath==item) {
to.meta.haeder=false;
to.meta.footer=true
}
})
console.log('打印守卫信息',to)
next();
})