zoukankan      html  css  js  c++  java
  • 浅看spa单页应用路由

    路由观察浏览器的URL的变更。当URL 变更时,路由会解析它并生成一个新的路由实例。

    一个基本的路由是这样的:

    class Router {
        private _defaultController: string;
        private _defaultAction: string;
    
        constructor(defaultController: string, defaultAction: string) {
            this._defaultController = defaultController || "home";
            this._defaultAction = defaultAction || "index";
        }
    
        public initialize() {
            $(window).on('hashchange', ()=> {
                var r = this.getRoute();
                this.onRouteChange(r);
            })
        }
    
        //  读取URL
        private getRoute() {
            var h = window.location.hash;
            return this.parseRoute(h);
        }
    
        //  解析URL
        private parseRoute(hash: string) {
            var comp, controller, action, args, i;
            if(hash[hash.length - 1] === "/") {
                hash = hash.substring(0, hash.length - 1);
            }
            comp = hash.replace("#", '').split('/');
            controller = comp[0] || this._defaultController;
            action = comp[1] || this._defaultAction;
    
            args = [];
            for (i = 2; i < comp.length; i++) {
                args.push(comp[i]);
            }
            return new Route(controller, action, args);
        }
    
        private onRouteChange(route: Route) {
            //  在此处执行控制器
        }
    }

    上面这个类使用默认controller和默认方法的名字作为它的构造函数的参数。当没有参数被传入时,home和index作为默认controller名和默认方法名。

    initialize方法被用来创建hashchange事件的监听。浏览器会在window.location.hash变更的时候触发这个事件。比如,当前页面的URL是http:localhost:8080,当用户点击了下面的链接<a href="#tasks/index">点我</a>,window.location.hash的值会变成“/task/index”。浏览器地址栏中的地址会变更,但hash字符会阻止浏览器重载当前页面。随后路由会使用parseRoute调用getRoute方法将URL转变成一个新的Route类实例。

    URL遵循下面的命名规范:

    #controllerName/actionName/arg1/arg2/arg3/argN

    这意味着task/index URL 会被转换成:

    new Route(“task”, “index”, []);

    Route类的实例被传入onRouteChange()方法中,它将负责调用处理这个路由的controller

  • 相关阅读:
    innotop 安装和使用
    Waiting for table flush 的原因及处理方法
    input 在 chrome 下 , 自动填充后,默认样式清除
    小米WiFi放大器出现黄灯闪烁,无法使用处理方法
    Error writing file '/tmp/MLLGyECY' (Errcode: 28
    org.apache.activemq.transport.InactivityIOException: Channel was inactive for too (>30000) long: tcp://192.168.120.22:61616
    Apache-Tomcat-Ajp漏洞(CVE-2020-1938)漏洞复现 和处理
    Spring boot CommandLineRunner接口使用例子
    interface21
    interface21
  • 原文地址:https://www.cnblogs.com/pjl43/p/9538859.html
Copyright © 2011-2022 走看看