The Principle of Routing

Posted by pcw on Fri, 30 Aug 2019 10:37:07 +0200

First, Routing Principles

1. Definition: End-to-end transport path

2. Routing structure

protocal: protocol header
hostname: domain name
Port: port
Pathname: pathname
search: query parameters
hash: hash, locate the anchor, and it will not be transmitted to the server

3. Query routing information: window.location

4. Routing front-end routing and back-end routing

Back-end routing: Resource path, which may return images, json, html, etc.

Front-end routing: Front-end itself parses routing information

5. Characteristics of Front-end Routing

Changing the url does not send requests to the server.

Note: Changes here refer to js dynamic changes, not page refreshes.

The front end can monitor url changes.
The front end can parse url information and perform corresponding operations.

6. There are two ways to implement front-end routing: hash, history.

Second, hash implements front-end routing

1.api

window.location.assign: Change the browser address to generate a new history
window.location.replace: Changing the browser's address will not generate a new history
window.location.onhashchange: a listening method for changing routing hash values

2. Operation process

3. Characteristics:

ugly
Occupancy anchor function
Good compatibility

4. Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hash</title>
    <style>
        #space{height: 1500px;background-color: #f7ead9}
    </style>
</head>
<button id="btn1">assign hash</button>
<button id="btn2">replace hash</button>
<a href="#Hash "> a tag tracks DOM nodes with hash id through href</a>
<div id="space"></div>
<h3 id="hash">hash Target of Links</h3>
<body>
    <script>
        window.addEventListener('hashchange',function(event){
            console.log(event);
        })
        document.getElementById('btn1').onclick=function(){
            window.location.assign('#/hash');
        }
        let n=0;
        document.getElementById('btn2').onclick=function(){
            window.location.replace('#/hash'+n++);
        }
    </script>
</body>
</html>

Third, history implements front-end routing

1.api

window.history.pushstate: Change the browser address to generate a new history
window.history.replacestate: Change the browser address and overwrite the current history
window.history.onpopstate: Triggered when the browser retreats or advances

2. Characteristics

Compatible to ie10
Routing is the same as backend, it can change the path name directly, not only the hash value.
Back-end support is needed because routing still requests the server when refreshing the page, and if the server does not have the corresponding path, it will report 404 errors.

3. Operation process

4. Examples

<button id="btn1">assign hash</button>
<button id="btn2">replace hash</button>
<body>
    <script>
        window.addEventListener('popstate',function(event){
            console.log(event);
        })
        document.getElementById('btn1').onclick=function(){
            window.history.pushState(null,null,'/p1');
        }
        let n=0;
        document.getElementById('btn2').onclick=function(){
            window.history.replaceState(null,null,'/r'+n++);
        }
    </script>
</body>

Fourth, back-end support for history

1. Take koa as an example.

The routeTest folder is a project file with history routing function. It is placed in a back-end project, koa-test, as part of the back-end project, and there will be other projects in the back-end project.

2. Configure back-end routing on the app.js axis

router.get('/routeTest',routeTest);
router.get('/routeSecond',routeTest);
async function routeTest(ctx) {
    await ctx.render('routeTest/index');
}

Start from the front end to the server' http://127.0.0.1 300/routeTest'and' http://127.0.0.1 The index.html file under the routeTest project is opened when requesting 300/routeSecond'. This way, when you refresh the page, you won't report 404 errors.
Complete app.js code

const Koa=require('Koa');
const KoaRouter=require('koa-router');
const path=require('path');
const render=require('koa-ejs');
const app=new Koa();
const router=new KoaRouter();

render(app,{
    root:path.join(__dirname,'views'),
    layout:'layout',
    viewExt:'html',
    cache:false,
    debug:false
})
router.get('/',index);
router.get('/routeTest',routeTest);
router.get('/routeSecond',routeTest);
async function index(ctx) {
    await ctx.render('index', {
        msg: 'Free is my love....',
    });
}
async function routeTest(ctx) {
    await ctx.render('routeTest/index');
}
app.use(router.routes()).use(router.allowedMethods());
app.listen(300,()=>{
    console.log('server start...');
})

Reference link: https://ke.qq.com/course/3600...

Topics: Javascript JSON

Programmer Think

The Principle of Routing

First, Routing Principles

Second, hash implements front-end routing

Third, history implements front-end routing

Fourth, back-end support for history

Hot Topics