利用hash值实现路由

hash路由是利用hash值实现界面切换。hash值是url地址#号后面的内容, 可以作为页面的锚点，实现一个页面不同锚点之间的跳转.例如: 当从hash值为#a的路径切换到hash值为#b的路径时，界面会从a切换到b。

import { createLoginPage，createHomePage } from './pages.js'
export const routes = [
    {
        path: 'login',
        page: createLoginPage(),
    },
    {
        path: 'home',
        page: createHomePage(),
    },
]

import f routes } from './js/routes.js'
/**
*添加路由，默认home
*/
const router = () => {
    const url = location.hash.slice(1) || 'login' //获取hash值
    const rootEle = document.body //路由输出根节点
    rootEle.innerHTML = '' //清空原内容
    const childEle = routes.find(item => item.path == url).page //查找路由组件
    //添加路由组件
    rootEle.appendChild(childEle)
}

router()//初始化

// hash路由切换监听, hash值变化触发
window.addEventListener('hashchange', router)