A brief introduction to the principle of vue-router

• vue-router principle
  • hash mode
    • Implementation principle
      • Change the drawing point
      • Monitor changes in tracing points
  • history mode
    • Implementation principle
      • change url
      • Listen for url changes
  • abstract
  • What is the difference between hash and history modes?
    • url is different
    • The principles are different
  • other
  • Summarize
  • 404 error occurs when extending history

vue-router principle

vue-router is an important part of the vue project and is used to build single-page applications.

Single-page applications are based on routing and components. Routing is used to set access paths and map paths to components.

The essence of routing is to establish the mapping relationship between URLs and pages.

Implementation principle: The principle of vue-router is to update the view without re-requesting the page

For more details, please search " " on WeChat前端爱好者 and click me to view .

vue-router can be set to three modes through the mode parameter: hash mode, history mode, and abstract mode .

hash mode

Hash mode is the default mode of vue-router.

Hash refers to the url tracing point . When the tracing point changes, the browser will only modify the access history and will not access the server to re-obtain the page.

Therefore, you can monitor the change of the drawing point value and render the specified dom according to the drawing point value.

Implementation principle

Change the drawing point

You can location.hash = "/hashpath"modify the browser's hash value through.

Monitor changes in tracing points

hashchange事件Changes in hash values ​​can be monitored through monitoring .

window.addEventListener('hashchange', () => {
    
    
   const hash = window.location.hash.substr(1)
   // 根据hash值渲染不同的dom
})

When push is called, the new route is added to the top of the browser's access history stack.

When using replace, replace the top route of the browser access history stack with the value of the new route hash (equal to # in the url and its subsequent contents).

The browser loads the page to the corresponding DOM location based on the change in hash value.

Anchor point changes are just the behavior of the browser. Each time the anchor point changes, a history record will still be left in the browser, and you can return to the previous position through the browser's back button.

history mode

In hash mode, the URL may be in the following form:

http://localhost:8080/index.html#/book?bookid=1

There are both # and ? in the above URL, which will make the URL look strange. Therefore, you can use the history mode. In this mode, the URL will look like the following:

http://localhost:8080/book/1

Implementation principle

change url

H5's history object provides two methods: pushStateand replaceState. When these two methods are called, the URL will change and the browser access history will also change, but the browser will not send a request to the background.

// 第一个参数：data对象，在监听变化的事件中能够获取到
// 第二个参数：title标题
// 第三个参数：跳转地址
history.pushState({
    
    }, "", '/a')

Listen for url changes

History changes can be monitored through listening popstateevents, which are triggered when the forward or back function of the browser is clicked.

window.addEventListener("popstate", () => {
    
    
    const path = window.location.pathname
    // 根据path不同可渲染不同的dom
})

abstract

Records related to browser addresses are not involved.

The process is the same as the hash mode, and the history stack of the simulated browser is maintained through arrays and used on the server side.

Use a browser-independent browser history virtual management backend

What is the difference between hash and history modes?

url is different

The hash route has "#" on the URL in the address bar, but the history route does not;

The principles are different

Hash is used to hashchangemonitor changes in the history stack and replace the routing of the browser history stack with 新的 hash.
The browser will load the page to the corresponding DOM location based on the hash change.

History window.onpopstatemonitors the address bar and uses it to pushState()、replaceState()modify the history stack, so that the URL can be loaded without jumping to the page.

One problem he has is that refreshing the page will take the back-end route, so it needs assistance from the server to avoid returning to the page when the URL cannot match the resource.

other

Hash supports some lower version browsers, but history does not.

Summarize

• The hash route has # on the URL in the address bar and can be window.location.hashread with . There is no history route, so it will look better.
• When we press Enter to refresh, the hash route will be loaded to the page corresponding to the address bar, while the history route usually reports a 404 error ( 刷新是网络请求，没有后端准备时会报错 ).
• Hash routing supports lower version browsers history路由是HTML5新增的API .
• The characteristic of hash is that although it appears in the URL, it is not included in the http request, so it has no impact on the backend, so changing the hash will not reload the page, so this is also a must for single-page applications.
• History uses the browser's history stack. There were back,forward,go methods before, and then new methods were added in HTML5 pushState（）和replaceState（） . They provide the function of modifying the history. However, when making modifications, although the current URL is changed, the browser The request will not be sent to the backend immediately.
• history的这种模式需要后台配置支持 . For example: when we go to the project homepage, everything is normal and can be accessed, but when we refresh the page or directly access the path, 404 will be returned [ 那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404]

404 error occurs when extending history

1: In hash mode, only the content before the hash symbol will be included in the request, such as http://www.abc.com. Therefore, for the backend, even if the routing is not fully covered, it will not Returns a 404 error.

2: In history mode, the URL of the front-end must be consistent with the URL that actually initiates the request to the back-end. Such as http://www.abc.com/book/id. If the backend lacks routing processing for /book/id, a 404 error will be returned

problem solved:

Solution to 404 error: Many methods introduced online do not work. Install the URL rewriting module, configure the rewriting rules, and point them to index.html. Or directly place the web.config file generated by URL rewriting directly in the root directory of the website.

Reference documentation

• https://v3.router.vuejs.org/zh/installation.html
• https://www.cnblogs.com/ifon/p/15881223.html
• https://zhuanlan.zhihu.com/p/584365427
• https://www.php.cn/faq/490021.html
• https://segmentfault.com/a/1190000023662742