<> Understanding routing

Create one first vue-cli2 project ,use vue-router

slightly …

<> Front end rendering Render Back-End Front end routing Back end routing

<> Render Back-End

* jsp: (java server page) = html+css+java code ( Read data from database dynamically )
* The server side has been rendered , The page has been rendered , Then send it to the front end
* How to produce rendering number object directly on server html page , Return to the client for display
* URL Will be sent to the server , The server will update the url Match , And finally to one controller Deal with it
* controller Carry out various treatments , Final generation HTML Or the data is returned to the terminal
* php
In this case, the rendering number of the page , There is no need to load any files separately js and css, It can be shown directly to the browser , It's also good for you SEO The optimization of

shortcoming :

* Everything is written and maintained by the back-end staff
* Front end developers need to php and java And other languages to write page code
* HTML Code and data and the corresponding logic are mixed up , Poor writing and maintenance
<> Back end routing

Back end processing URL And the mapping between pages

<> Front and rear separation stage

* The back end is only responsible for providing data , Not responsible for the content of any interface
* input URL after , Get it from the static resource server html+css+js,js The code is executed by the browser
* When executing ajax after , After getting data from the server , adopt JS Rendering HTML and CSS
* Most of the content of the web page displayed in the browser , It's all written by the front end js The code is executed in the browser , The final rendering comes from the web page
advantage :

* Clear front and back responsibilities , Back end focus on data
* Back end servers don't care , The front end is ios,web,android…, Still using the previous set API that will do
<> Single page rich application stage SPA

Front end routing phase :

One url Mapping a component , Front end routing management mapping
url --> Page mapping , I don't care !!!

* SPA The most important feature is to add a layer of front-end routing on the basis of front-end and back-end
* That is, the front end maintains a set of routing rules
The core of front end routing

* change URL, But the page does not refresh as a whole
* How to achieve it ?
<>URL Of hash

location.hash = 'url'

<>history.pushState({},’’,‘home’)

history.back() Out of the stack
history.replaceState() You can't access it yourself
histroy.go(-1) be equal to history.back()
history.forward() be equal to history.go(1)
change url, Page does not refresh
history Similar to stack structure ,url Shows the top of the stack elements !!!

Technology