原生实现前端路由的两种方式

前端路由

SPA（single Page web application ） 单页应用

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

前端路由就是用来帮助单页应用管理多个界面使用的。

前端路由和Tab页签的区别与联系

1. 前端路由和Tab界面切换的时候都会有内容的切换
2. 前端路由界面切换的时候需要伴随着路径的改变,tab页签不一定具备的
3. 前端路由需要支持浏览器前进后退, tab页签不一定具备的

前端路由实现技术

1. hash 路由

 <script>
        let root = document.querySelector('.root');
        // window      
        window.addEventListener('hashchange', function(e) {
            console.log("window hashchange", e, location)
            root.innerHTML = location.hash; 
        })
</script>

​

总结： 哈希的特点就是点击之后 路径改变并且就上一个页面压入到浏览器访问记录中,并且触发hashchange事件。因此使用监听 hashchange事件实现路径一改变更新页面内容。

2. history api

 <script>
        ; (function () {
            var examplebox = document.getElementById('example')
            var mainbox = document.getElementById('root')
            var backbtn = document.getElementById('backbtn');

            examplebox.addEventListener('click', function (e) {
                e.preventDefault();
                var elm = e.target
                var uri = elm.href;
                var tlt = elm.href.split('\/')[3];

                console.log(uri, tlt, 'tlt');

                history.pushState({ path: uri, title: tlt }, null, uri)

                console.log(history.state);
                mainbox.innerHTML = 'current page is ' + tlt

            })


            backbtn.addEventListener('click', function () {
                history.go(-1);
            });


            window.addEventListener('popstate', function (e) {
                console.log('=====================');
                console.log(e)
                var state = e.state
                mainbox.innerHTML = 'current page is ' + state.title
            })
        })()
    </script>

history实现前端路由 主要依赖 history.pushState 去切换路径 ，通过popstate的事件监听 去支持浏览器前进后退内容切换。