简介
jeefo_router是一个前端路由库，可以帮助开发者方便地实现前端路由功能，结合使用可以达到和后端路由相似的效果。jeefo_router支持hash和history两种路由方式，还提供了路由守卫，路由嵌套等功能。
安装
要使用 jeefo_router，首先需要安装它。
npm install jeefo_router基本用法
在使用 jeefo_router前，需要先创建一个Router实例：
import { Router } from 'jeefo_router'; const router = new Router();
然后可以使用router对象的各个方法来添加路由。
添加路由
- 添加hash路由
router.hash('#/home', () => { console.log('this is home page'); })
- 添加history路由
router.history('/home', () => { console.log('this is home page'); })
跳转路由
- 跳转hash路由
router.go('#/home');
- 跳转history路由
router.go('/home');
路由守卫
路由守卫是指在路由跳转之前或之后执行的函数。在 jeefo_router中，路由守卫有四种类型：
- beforeEach：在路由跳转之前执行
- afterEach: 在路由跳转之后执行
- beforeResolve: 在路由resove之前执行
- afterResolve: 在路由resolve之后执行
router.beforeEach((to, from, next) => { console.log('beforeEach...'); next(); })
路由嵌套
jeefo_router支持路由嵌套，可以在一个路由组件内部添加子路由：
-- -------------------- ---- ------- ----- ------ - --- --------- ----- ---------- - --- --------- ---------- -------------------- -- -- - ----------------- -- ---- ---- ------- -- --------------------- -- -- - ----------------- -- ---- ------- ----------------------------- --展开代码
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- ------ - ------ - ---- --------------- ----- ------ - --- --------- ---------------------- ----- ----- -- - ----------------------------- ------- -- ------------------- -- - ---------------------------- -- ----- ------- - ----------------------------------- --------------------------------- -- -- - ------------------- -- ----- ------- - ----------------------------------- --------------------------------- -- -- - ------------------- -- ----- ---------- - --- --------- ---------- -------------------- -- -- - ----------------- -- ---- ---- ------- -- --------------------- -- -- - ----------------- -- ---- ------- -- --------------------- -- -- - ----------------- -- ---- ------- ----------------------------- -- --------------展开代码
结语
使用 jeefo_router可以方便地实现前端路由，还可以结合路由守卫和路由嵌套等功能实现更加复杂的路由场景。本文介绍了 jeefo_router的基本使用方法和示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66133
