欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

简单路由的实现

程序员文章站 2024-03-15 19:28:54
...

1.hash路由
原理：就是监听浏览器的hashchange事件，通过动态设置location.hash或者锚点的方式来改变hash值，让页面内的视图发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
	<div id="tab1" href='#tab1'>Tab1</a>
    <a href="#tab2">Tab2</a>
    <div id="routerView"></div>
    <script>
		document.querySelector('#tab1').onclick = function () {
            location.hash = '#tab1'
        }
        window.addEventListener('hashchange', router)
        var routerView = document.querySelector('#routerView')
        function router () {
            var hash = location.hash
            switch (hash) {
                case '#tab1':
                    routerView.innerHTML = 'tab1'
                    break
                case '#tab2':
                    routerView.innerHTML = 'tab2'
                    break
                default:
                    routerView.innerHTML = 'tab'
            }
        }
	</script>
</body>
</html>

这样切换点击tab1和tab2，下面的routerview就会变化，导航栏的hash也会跟着变化
2.history模式
主要使用的history的pushState等方法
简单路由的实现
history.pushState/replaceState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="tab1">Tab1</div>
    <div id="tab2">Tab2</div>
    <div id="routerView"></div>
    <script>
        document.querySelector('#tab1').onclick = function () {
            history.pushState(null, null, 'tab1')
            router('tab1')
        }
        document.querySelector('#tab2').onclick = function () {
            history.pushState(null, null, 'tab2')
            router('tab2')
        }
        var routerView = document.querySelector('#routerView')
        function router (type) {
            switch (type) {
                case 'tab1':
                    routerView.innerHTML = 'tab1'
                    break
                case 'tab2':
                    routerView.innerHTML = 'tab2'
                    break
                default:
                    routerView.innerHTML = 'tab'
                    break
            }
        }
    </script>
</body>
</html>

这里使用只是个简单的操作，实际实现中应该要观察url的动态变化，然后触发函数，可使用观察者模式实现（后续补充）
3.popstate当浏览器前进后退的时候触发，改变hash的时候都会触发

 window.onpopstate = function (event) {
     console.log('location: ' + document.location);
     console.log('state: ' + JSON.stringify(event.state));
 }
 // 或者
 window.addEventListener('popstate', function(event) {
     console.log('location: ' + document.location);
     console.log('state: ' + JSON.stringify(event.state));
 })

可在浏览器后退时监听做一些操作，注意：pushState/replaceState不会触发popState函数

上一篇： 浅谈MVP架构在Android中的应用

下一篇： android 解决aar二次封装问题

推荐阅读