routing
What is routing?
Routing is a term in network engineering.
Routing is the activity of transferring information from a source address to a destination address through an interconnected network. — Wikipedia
What does a router do? Have you thought about it? The
router provides two mechanisms: routing and forwarding.
Routing is to determine the path of a data packet from the source to the destination.
Forwarding transfers the input data to the appropriate output.
Routing There is a very important concept called the routing table. The
routing table is essentially a mapping table, which determines the direction of the data packet
Back-end routing stage In the
early website development, the entire HTML page is rendered by the server. The
server directly produces and renders the corresponding HTML page and returns it to the client for display.
However, for a website, how does the server handle so many pages?
A page It has its own corresponding URL, which is the URL. The
URL will be sent to the server, the server will match the URL through the regular, and finally handed over to a Controller for processing. The
Controller performs various processing, and finally generates HTML or data, and returns it to the front end .
this completes an IO operation
above this operation is the back-end routing.
when we need to request a different page in the path of the content, to the server for processing, the server render the entire page is good, and will return to the page Customer pause. In
this case, the rendered page does not need to load any js and css separately, and can be directly handed over to the browser for display, which is also conducive to SEO optimization.
The disadvantage of back-end routing:
one situation is the entire page The modules are written and maintained by back-end personnel.
Another situation is that if front-end developers want to develop pages, they need to write page code through languages such as PHP and Java. In
general, HTML code and data and corresponding logic will be Mixed together, writing and maintaining are very bad things.
Routing phases distal
end of the longitudinal separation stage:
With the emergence of Ajax, the front and rear end of the separation pattern of development with
a rear end API to only return data, the data acquired by the front end of Ajax, JavaScript and by the rendering data to the page.
Thus The biggest advantage of doing this is the clarity of front-end and back-end responsibilities. The back-end focuses on data, and the front-end focuses on interaction and visualization.
And when the mobile terminal (iOS/Android) appears, the back-end does not need to perform any processing, and the previous One set of API
is enough . At present, many websites are still developed in this mode.
Single-page rich application stage:
In fact, the main feature of SPA is to add a layer of front-end routing on the basis of the separation of front-end and back-end.
That is, the front-end maintains one Set of
routing rules. What is the core of front-end routing?
Change the URL, but the page does not refresh as a whole.
How to achieve it?
Change our url but the page does not refresh the
URL hash The hash of the
URL is also the anchor point (#), essentially changing the href attribute of window.location.
We can change the href by directly assigning location.hash, but the page does not refresh
history.pushState((),'','home') at the bottom of the stack
history.pushState((),'','about') in the middle
history.pushState((),'','me') at the top of the stack the
continuous pressure to stack three things inside, home for the first time go, about a second, me third time
this time to call a method called back history.back return from me to the top of the stack is about now about
to By analogy, you can also click the left and right arrows, the browser has a history record
The history interface is new in HTML5. It has five modes to change the URL without refreshing the page.
history.pushState()
history.replaceState({},'','home') url address will be followed by home
history.replaceState({},'','about') url address will also be changed to about, but the return button cannot be clicked.
Because of the meaning of replace, so replace the previous home with the latest about, there is no push and pop
history.go
demo:
history.pushState({},'','home')
history.pushState({},'','about')
history.pushState({},'','me')
history.pushState ({},'','demo')
history.pushState({},'','test')
history.go(-1) will bounce off the test, so that the demo is returned, which is equivalent to the history. back, the same history.go(1) is equivalent to history.forward()
and so on, and positive numbers can also be written inside
vue-router Vue routing
Vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications.
You can visit its official website to learn about it: add link description
vue-router is based on routing and components.
Routing is used to set access paths and map paths and components.
In the single-page application of vue-router, the path of the page The change is the switch of components.
I have learned webpack, and the subsequent development is mainly through the engineering method.
So in the follow-up, directly use npm to install the router.
Step 1: Install vue-router
npm install vue-router --save
Step 2: Use it in a modular project (because it is a plug-in, you can install the routing function through Vue.use())
Step 1: Import the routing object and call Vue.use(VueRouter)
Step 2: Create a routing instance, And the routing mapping configuration is passed in.
Step 3: Mount the created routing instance in the Vue instance.
Steps to use vue-router:
Step 1: Create routing components
Step 2: Configure routing mapping:
Step three of the mapping between components and paths : Use routing: Pass and
mount to the Vue instance.
Step 1: Create routing components.
Step 2: Configure the mapping relationship between components and paths.
Step 3: Use routing
: This label is a built-in component in vue-router, and it will be Rendered into a label
.: The label will dynamically render different components according to the current path.
Other content of the webpage, such as the title/navigation at the top, or some copyright information at the bottom, will be at the same level.
Switch in the route When switching is the mounted component, other content will not happen
Pay attention to rest, continue to update tomorrow!