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
- What is a route?
- What is SPA?
- How does vue-router implement route change without refreshing?
- 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:
-
The browser initiates a request, for example, http://www.xxx.com/
-
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)
-
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 patternabstract
Support 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
- Hash Mode (before 2014)
- Such as:
http://www.xxx.com/#/login
(With #, changing the URL will not initiate a request)
- Such as:
- History mode (remove ‘#’, need server cooperation) (released in HTML5 14 years later, add pushState and replaceState)
- through
PushState and replaceState
Two apis can be implemented: change url address, no request, and so onPopState event
- through
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 visit
http://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
-
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 -
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.href
If 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
- If it is a reptile, thenReturns pre-rendered HTML(document. QuerySelector (‘ HTML ‘). OuterHTML).
- 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
- 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…