hashchange 和 pushstate 两种方式做路由的简单实现

最新推荐文章于 2022-12-25 14:11:11 发布

annuobin1120

最新推荐文章于 2022-12-25 14:11:11 发布

阅读量347

点赞数

原文链接：http://www.cnblogs.com/WhiteHorseIsNotHorse/p/6380285.html

版权

第一种

<!DOCTYPE HTML>
<title>Line Game - 1</title>
<p>you are at <span id="span1">1</span> line</p>
<a href="?x=2" οnclick="go(1);return false">advance to 2</a>or
<a href="?x=0" οnclick="go(-1);return false">back to 0</a>
<script>
    var currentPage = 1;
    function go(num){
        currentPage = currentPage+num;
        setState(currentPage);
        history.pushState(currentPage,'hahah','?='+currentPage);
    };
    onpopstate = function (event) {
        setState(event.state);
    };

    var domSpan = document.querySelector('#span1');
    function  setState(currentPage){

        domSpan.textContent = currentPage;
        document.title = 'line game'+currentPage;

        document.links[0].href = '?x='+(currentPage+1);
        document.links[0].textContent= 'advance to'+(currentPage+1);

        document.links[1].href = '?x='+(currentPage-1);
        document.links[1].textContent= 'advance to'+(currentPage-1);
    }


</script>

　　第二种

<a href="#/">首页</a>
<a href="#/wether">天气页</a>
<a href="#/news">新闻也</a>
<div id="div1"></div>
<script>
    function Router(){
        this.curUrl = '';
        this.routes = {};
        this.refresh = function () {
            this.curUrl = location.hash.slice(1) || '/';
            this.routes[this.curUrl]();
        };
        this.init = function () {
            window.addEventListener('hashchange',this.refresh.bind(this));
            window.addEventListener('load',this.refresh.bind(this));
        };
        this.route = function (path, callback) {
            this.routes[path] = callback || function(){}
        }
    };
    var domDiv = document.querySelector('#div1');
    var r = new Router();
    r.init();
    r.route('/', function () {
        domDiv.textContent = '首页'
    });
    r.route('/news', function () {
        domDiv.textContent = '新闻'
    });
    r.route('/wether', function () {
        domDiv.textContent = '天气'
    });

</script>

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6380285.html