Introduction to the implementation of front-end routing and its basic principles (with examples)

This article brings you an introduction to the implementation of front-end routing and its basic principles (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

1. Front-end routing

The most popular page model in modern front-end development is the SPA single-page application architecture. A single-page application refers to an application that has only one main page. It simulates the effect of a multi-page application by dynamically replacing the DOM content and simultaneously modifying the URL address. The function of switching pages is completed directly by the front-end script, rather than by the back-end after rendering. The front end is only responsible for display. The front-end troika Angular, Vue, and React all run based on this model. SPA can simulate the effect of multi-page applications thanks to its front-end routing mechanism.

Front-end routing, as the name suggests, is a state manager for different front-end pages. It can directly achieve the effects of multiple pages through front-end technology without sending requests to the background. The ui-router in angularjs, the vue-router in vue, and the react-router in react are all specific implementations of this function.

Since front-end routing is so awesome, we must study it carefully.

2. Two implementation methods and their principles

Both methods are supported and can be switched in common routing plug-ins. For example, in angularjs1.x, you can use the following code to switch from Hash mode to Switch to H5 mode:
$locationProvider.html5Mode(true);
Switch to HTML5 routing mode, which is mainly used to avoid problems caused by # contained in the URL address.

1.HashChange

1.1 Principle

The HTML page can be redirected without refreshing through the anchor point positioning principle. After triggering, there will be more # in the url address. 'XXX' part, and trigger the hashChange event on the global window object at the same time. In this way, when the page anchor hash changes to a certain preset value, the corresponding page DOM change is triggered through the code, and basic routing can be implemented. Routing based on anchor hash is relatively intuitive and is also the most commonly used method in general front-end routing plug-ins.

1.2 Application

Let’s take a look at an example. When you click on the angularjs connection, you can see that the console prints out the corresponding information.

2.HTML5 HistoryAPI

2.1 Principle

The History API of HTML5 is an extension method added to the global history object of the browser. Generally used to solve the problem that ajax requests cannot return to the state before the request through the back button.

In HTML4, the window.history object is already supported to control the page history jump. Commonly used methods include:

• history.forward(); //Go one step forward in history

• ##history.back(); //Go one step back in history

• history.go(n): //Jump n steps in the history, n=0 means refreshing this page, n=-1 means going back one page.

In HTML5, the

window.history object has been extended, and the new APIs include:

• history.pushState(data[,title][,url]);//Append a record to the history record

• history.replaceState(data[, title][,url]);//Replace the information of the current page in the history record.

• history.state;//It is an attribute that can get the state information of the current page.

• window.onpopstate;//It is an event that is triggered when the browser back button is clicked or js calls forward(), back(), go() . An event object can be passed in to the listening function, and event.state is the data parameter passed in through the pushState() or replaceState() method.

2.2 Application

When the browser accesses a page, the status information of the current address will be pushed into the history stack. When the history.pushState() method is called, the status information of the current address will be pushed to the history stack. After a new state is pushed, the pointer at the top of the history stack points to the new state. Its function can be simply understood as pretending that the url address has been modified and jumped. Unless the user clicks the browser's forward, backward, or explicitly calls the method of operating the history stack in HTML4, the global will not be triggered. popstate event.

In the following example, click the navigation button, you can see that the URL address bar has changed, and the console prints the response information.

3. Comparison between hash and history API

Comparison hash routeHistory API routeurl stringuglynormalNaming restrictionsUsually can only be changed under the same The url address can be defined by yourself, as long as it is the same domain name It can be downloaded, and the degree of freedom is greaterurl address changewill changecan be changed or notStatus SavingThere is no built-in method, the status information of the page needs to be saved separatelyWhen the page information is pushed into the history stack, it can be accompanied by customized informationParameter passing ability is limited by the total length of the url, can be accompanied by customized information when pushing page information into the history stackPracticalityCan be used directlyUsually the server needs to modify the code to achieve CompatibilityIE8 and aboveIE10 and above

3. Build a simple front-end routing plug-in by yourself

Building a wheel is not to install it on your car, but to have an extra wheel when you drive in the wilderness and something goes wrong with the wheel. choice.

Next, let’s implement a front-end routing plug-in by yourself~

3.1 Hash-based front-end routing plug-inmyHashRouter.js

We hope to achieve The functions are:

1. Introduce the MyHashRouter.js library

2. Define several different routing states through the when() method

3. Through the init() method Start the routing function

4. Realize front-end routing switching by clicking navigation

First write the js skeleton, as shown in the figure:

;(function() {
    function Router() {
        //记录路由的跳转历史
        this.historyStack = [];
        //记录已注册的路由信息
        this.registeredRouter = [];
        //路由匹配失败时跳转项
        this.otherwiseRouter = {
            path: '/',
            content: 'home page'
        }
    }

    /*
     * 启动路由功能
     */
    Router.prototype.init = function() {

    }

     /*
     * 绑定window.onhashchange事件的回调函数
     */
    Router.prototype._bindEvents = function() {

    }

    /**
     * 路由注册方法
     */
    Router.prototype.when = function(path, content) {

    }

    /**
     * 判断新添加的路由是否已存在
     */
    Router.prototype._hasThisRouter = function(path) {

    }

    /**
     * 路由不存在时的指定地址
     */
    Router.prototype.otherwise = function(path, content) {

    }

    /**
     * 路由跳转方法，主动调用时可用于跳转路由
     */
    Router.prototype.go = function(topath) {

    }

    /**
     * 用于将对应路由信息渲染至页面,实现路由切换
     */
    Router.prototype.render = function (content) {
     
    }

    var router = new Router();

    //将接口暴露至全局
    window.$router = router;
})();

After completing the writing of the routing plug-in, we Introduce the library in the demo, then use the when() method to register several routing addresses, and then use the init() method to start routing. The script part code is as follows:

Effect:
Run router-demo-hash.html in the attachment, click the navigation button, and you will see the url address bar and content area change synchronously.

3.2 Front-end routing plug-in based on History APImyHistoryRouter.js

Because History API does not support browsers below IE10 (others Most modern browsers basically support it), so we first make an availability judgment when the init() method is started. The basic code framework is consistent with the Hash-based routing plug-in. The implementation of each method is not difficult to write, so I won’t go into details here. The author’s own code implementation is placed in the attachment myHashRouter.js. The level is limited and is for reference only.

3.3 Integration instructions

To facilitate understanding, the two modes are written separately in this example. If it is the development of a plug-in library, you can imitate ui-routerAdd a html5mode() method. When the init() method starts routing, it will generate single instances of different routing plug-ins based on the parameters passed. This is what we often call Factory Pattern to achieve it.

IV. Postscript

• Building wheels is a good way to learn. Although the wheels you make yourself are very simple, it is very important for understanding the tools. The underlying principles are helpful though.

• This example just writes the basic skeleton of a routing tool. The real routing tool still needs a lot of functional expansion, and the complexity of individual functions will be very high, such as path Regular matching,lazy loading,combined view,nested view,route animationetc., for those who are interested Partners can extend their learning on the framework provided in this example.

	document

The above is the detailed content of Introduction to the implementation of front-end routing and its basic principles (with examples). For more information, please follow other related articles on the PHP Chinese website!