基于Jquery的简单路由实现

最新推荐文章于 2023-03-23 07:11:53 发布

weixin_42199478

最新推荐文章于 2023-03-23 07:11:53 发布

阅读量2.1k

点赞数 1

分类专栏： js 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_42199478/article/details/117445226

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

基于Jquery的简单路由实现

主要代码
- 使用

主要代码

//路由数据格式，不要重复，只有前面的会生效
// var urls = [{
//     name: "",
//     path: "",
//     route: ""
// }]

/**
 * 初始化
 * @urls 路由列表
 * @viewbox 显示容器id，默认#view
 */
function $route(urls, viewbox = '#view') {
    var self = this;
    self.urls = urls;
    self.view = viewbox;
    self.$to_page = true;

    /**
     * 跳转方法
     * @url 跳转路由 可以name,path,route任意一个 
     * @view 显示容器，默认是初始化时选择的容器 
     */
    self.to = function(url, view) {
        view = view || self.view;
        var href = location.href.split('#')[0];
        self.$to_page = true;
        location.href = href + '#' + url + view;
    }

    $route_init(self);
}

/**
 * 初始化方法
 */
function $route_init(self) {
    var _link = location.href.split('#');

    //筛选路径
    function getPath(url) {
        if (!url) {
            _link = this.location.href.split('#');
            var path = self.urls[0];
            for (var i = 0; i < self.urls.length; i++) {
                if (self.urls[i].name == _link[1] || self.urls[i].path == _link[1] || self.urls[i].route == _link[1]) {
                    path = self.urls[i];
                    break;
                }
            }
            return path;
        } else {
            var path = '';
            for (var i = 0; i < self.urls.length; i++) {
                if (self.urls[i].name == url || self.urls[i].path == url || self.urls[i].route == url) {
                    path = self.urls[i];
                    break;
                }
            }
            return path;
        }
    }
    //监听地址栏刷新事件
    window.addEventListener("hashchange", function() {
        _link = this.location.href.split('#');
        $.get(getPath().path, function(d) {
            var html = $(d);
            $('#' + (_link[2] || 'view')).html(html);
        });
    });


    //监听a标签点击
    $('body').on('click', 'a.routerLink', function(e) {
        if (!self.$to_page) {
            return false;
        }

        self.$to_page = false;

        //a标签可以通过target属性指定容器,不会反应到地址栏里面去
        var view = $(this).prop('target') || self.view;
        var url = $(this).attr('href');
        var t_link = location.href;
        var t_link2 = location.href + '/';
        var t_link3 = location.href + '/#';
        if (url == t_link || url == t_link2 || url == t_link3) return false;

        if (view != self.view) {
            //加载其它容器

            $.get(getPath(url).path, function(d) {
                var html = $(d);
                $(view).html(html);
            });
        } else {
            //加载到主容器

            self.to(url, view);
        }

        e.stopPropagation();
        return false;
    });

    // 第一次加载
    $.get(getPath().path, function(d) {
        var html = $(d);
        $('#' + (_link[2] || 'view')).html(html);
    });
}

使用

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #view {
            overflow: hidden;
            transition: 0.3s;
        }
    </style>
</head>

<body>
    <a class="routerLink" href="/page1">11111111111111111111111</a> &nbsp;&nbsp;&nbsp;
    <a class="routerLink" href="/page2" target="#v2">22222222222222222222222</a>
    <div id="view"></div>
    <div id="v2"></div>
    <div>
        <h2>foot</h2>
    </div>
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="router.js"></script>
    <script>
        var $r = new $route([{
            name: "index",
            path: "page1.html",
            route: "/page1"
        }, {
            name: "page",
            path: "page2.html",
            route: "/page2"
        }]);
        $(function() {})
    </script>
</body>

</html>

page1.html

<div>
    <h1>1</h1>
</div>

<script>
    console.log(1);
</script>

page2.html

<div>
    <h1>2</h1>
</div>
<div>
    <h1>2</h1>
</div>
<div>
    <h1>2</h1>
</div>
<div>
    <h1>2</h1>
</div>

weixin_42199478

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Jquery的简单路由实现

基于Jquery的路由主要代码使用index.htmlpage1.htmlpage2.html主要代码//路由数据格式，不要重复，只有前面的会生效// var urls = [{// name: "",// path: "",// route: ""// }]/** * 初始化 * @urls 路由列表 * @viewbox 显示容器id，默认#view */function $route(urls, viewbox = '#view') { va
复制链接

扫一扫