Vue-router (SPA) None Refreshes the mechanism of changing routes

This paper mainly discusses the routing principle of SPA page

The points are as follows

  1. What is a route?
  2. What is SPA?
  3. How does vue-router implement route change without refreshing?
  4. Spa SEO problems

1. What is a route?

Background: Routing is first proposed by the back end and used for template engine development pages. Such as: http://www.xxx.com/login

The flow of routing resources:

  1. The browser initiates a request, for example, http://www.xxx.com/

  2. The server listens on port 80 (or 443) and, if a request comes in, parses the URL path

    • Return the corresponding resources (such as HTML, CSS, JS, JSON string) based on the path (routing configuration)

  3. Does the browser decide how to parse the data based on the content-Type response header

Features are :(traditional way, non-spa)

  • Change the route and the page refreshes. Because if you change the route, you get the resource again

The nature of routing:

  • Is a way for an application (client) to interact with a back end (server)

  • Request different resources and display different pages through different paths

2. What is SPA?

SPA: Single Page app

The biggest characteristic of SPA

  • Routes are not refreshed, and the view is displayed based on the route
    • The benefits are better performance and user experience (you can implement routing without refreshing the browser) and less stress on the server

3. How does vue-Router (SPA) implement route change without refreshing?

Router-view Then render the corresponding HTML content

So how do you implement refreshing – free routing?

Let’s first look at the mode of vue-Router

  • Type:string
  • Default value:"Hash" (the browser environment) | "the abstract" (Node. Js environment)
  • Optional value:"hash" | "history" | "abstract"

Routing modes:

  • hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api.
  • history: Relies on the HTML5 History API and server configuration. To viewHTML 5 History pattern
  • abstractSupport for all JavaScript runtime environments, such as node.js server side

The first two hash and history are primarily relevant to browser urls. I’m going to talk about these two

The first thing to know is how to change the browser URL without making a request. There are two ways to do this

  1. Hash Mode (before 2014)
    • Such as:http://www.xxx.com/#/login(With #, changing the URL will not initiate a request)
  2. History mode (remove ‘#’, need server cooperation) (released in HTML5 14 years later, add pushState and replaceState)
    • throughPushState and replaceStateTwo apis can be implemented: change url address, no request, and so onPopState event

1. Hash mode introduction

After you add a # to the URL, changing the URL does not initiate a request, and you can listen for route changes with the Hashchange event

window.addEventListener('hashchange'.function(event){
   console.log(event);
   
      
})
Copy the code

2. Introduction to the history mode

Features: no #, but requires server cooperation

Scenario 1: The user enters the URL in the browser address bar, for examplehttp://www.xxx.com/xxxx/xx/xx/xxx

  • No matter how long and complicated it is, there is only one thing for the server to do, and that is returnRoot index. HTML, like a visithttp://www.xxx.com(Vue-Router internally parses the full URL and displays the resource for the route)
  • In this scenario, the page refreshes

Scenario 2: Users perform operations on the page, for example, click a menu, and switch routes to display the contents of the menu

  • In this scenario, the page is not refreshed

  1. To monitor the back/forward/go

    If this.$router.go(n), this.$router.back(), this.$router.forward() then the popState event is raised

    Change urls using native history apis: history.back(),history.forward(), history.go()

    window.addEventListener('popstate'.function(event) {
     console.log(event);
     
        
})
Copy the code

  2. Listen to push/replace

    If this.$router.push(), this.$router.replace() does not trigger a popState Event, and you need to manually add the Event(new Event()) as follows

    Change urls using native apis: history.pushState, history.replaceState

    • For example: history.pushState(null, null, ‘test’) Official document
    / / modification
const _historyWrap = function(type) {
  const orig = history[type];
  const e = new Event(type);
  return function() {
    const rv = orig.apply(this.arguments);
    e.arguments = arguments;
    window.dispatchEvent(e);
    return rv;
  };
};
history.pushState = _historyWrap('pushState');
history.replaceState = _historyWrap('replaceState');

/ / to monitor
window.addEventListener('pushState'.function(e) {
  console.log('change pushState');
  
        
});
window.addEventListener('replaceState'.function(e) {
  console.log('change replaceState');
  
        
});

Copy the code

What’s the difference between vue-router and location.href?

  • location.hrefIf you change the URL directly, you will make a request to the server and refresh the page

4. Spa SEO problems

Use nginx + history routing mode

Principle: Nginx intercepts requests and handles crawlers and normal users separately

  1. If it is a reptile, thenReturns pre-rendered HTML(document. QuerySelector (‘ HTML ‘). OuterHTML).
    1. If your SPA route uses a hash route, change it to a History route (vUE, other spas may differ) because the hash does not propagate and the back end does not get hash parameters
  2. If it is a user, return to the root HTML as normal

Original arrangement, there are mistakes can leave a message, if useful, thank you for your praise ~

Reference: segmentfault.com/a/119000002…