# mfo-router

**Repository Path**: ereddate2017/mfo-router

## Basic Information

- **Project Name**: mfo-router
- **Description**: mfo-router, 前端路由模块。
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-31
- **Last Updated**: 2023-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, Router, mfo

## README

# mfo-router

#### 介绍
前端路由管理模块，原生javascript编写router

#### 发行说明

Latest version: [![npm version](https://img.shields.io/npm/v/mfo-router/latest.svg)](https://www.npmjs.com/package/mfo-router)

[![](https://data.jsdelivr.com/v1/package/npm/mfo-router/badge)](https://www.jsdelivr.com/package/npm/mfo-router)
#### 使用

##### 兼容控制

如果你得使用的浏览器不支持 promise (比如 IE)，就在 head 中引入：

```
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js">
</script>
```

或

```
npm install es6-promise --save

import 'es6-promise/auto'
```

##### 安装

使用方法：

```
npm i mfo-router
```

##### 详细 Demo

全量demo，[[index.html](https://gitee.com/ereddate2017/mfo-router/blob/master/index.html)]

```
    <script src="lib/index.js"></script>
    <script>
        const { createRouter } = mfoRouter
        const router = createRouter({
            mode: 'hash',
            routes: [{
                name: 'home',
                path: '/',
                render: () => { console.log('home') }
            }, {
                name: 'user',
                path: '/user',
                render: () => { console.log('user') }
            }]
        })
        router.addRoute({
            name: 'userParams',
            path: '/user-params/id/name',
            render: () => { console.log('userParams') }
        })
        router.addRoute({
            name: 'defaultHome',
            path: '/default-home',
            redirect: '/'
        })
        router.beforeEach((from, to, next) => {
            console.log('[beforeEach]', from, to)
            /* Intercept jump */
            if (from && from.path === '/default-home') {
                next('/user')
            } else {
                next()
            }
        })
        router.afterEach((from, to) => {
            console.log('[afterEach]', from, to)
        })
        router.forceUpdate()
        /* route jump error */
        router.routeJumpErrorFeedBack((err) => console.error(err))
        console.log(router)

        /* button click handle */
        const goHome = () => {
            router.push('/')
        }
        const buttonClickHandle = () => {
            router.push({ path: '/user', query: { a: 1 } })
        }
        const buttonClickHandleD = () => {
            router.push({ path: '/user-params/id/name', params: { id: 1, name: 'nickName' } })
        }
        const buttonClickHandleE = () => {
            router.go(-1)
        }
        const buttonClickHandleF = () => {
            router.replace({ path: '/user-params/id/name', params: { id: 2, name: 'replace' } })
        }
        const buttonClickHandleB = () => {
            router.push({ path: '/default-home' })
        }
        const buttonClickHandleC = () => {
            router.back()
        }
    </script>
```