mfo-router

介绍

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

发行说明

Latest version:

使用

兼容控制

如果你得使用的浏览器不支持 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]

    <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>