Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to realize the two modes of vue routing". In the daily operation, I believe that many people have doubts about how to realize the two modes of vue routing. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to realize the two modes of vue routing". Next, please follow the editor to study!

There are two modes of vue routing: 1, hash mode, which is based on onhashchange events, which can be listened to on window objects; 2. History mode, which can use the API of "history.pushState" to complete the URL jump.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Front and back end separation = = > with Ajax, you can exchange data requests asynchronously without refreshing the browser.

Single-page applications (there is only one html file, all the content of the entire site is in this html, processed through js) is not only no refresh in the page interaction, but also no refresh in the page jump. In order to achieve single-page application = > front-end separation + front-end routing. (update the view without re-requesting the page)

The implementation of front-end routing is actually very simple, that is, matching different url paths, parsing, loading different components, and then dynamically rendering the regional html content.

Hash mode

The later change in hash value will not cause the browser to issue a request to the server. If the browser does not make a request, the page will not be refreshed. Each time the hash value changes, the hashchange event is triggered, through which we can know what changes have taken place in the hash value. Then we can listen to hashchange to update parts of the page:

The principle behind the hash pattern is the onhashchange event, which you can listen to on the window object:

_ window.onhashchange = function (event) {console.log (event.oldURL, event.newURL); let hash = location.hash.slice (1); document.body.style.color = hash;}

The above code can change the font color of the page by changing hash.

When you select the mode type, the program creates different history objects (hash:HashHistory or history:HTML5History or abstract:AbstractHistory) according to the mode type you choose.

Switch (mode) {case 'history': this.history = new HTML5History (this, options.base) break case' hash': this.history = new HashHistory (this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory (this, options.base) break default: if (process.env.NODE_ENV! = =' production') {assert (false, `invalid mode: ${mode} `)}}

HashHistory has two methods: HashHistory.push () adds the new route to the top of the browser access history and HashHistory.replace () replaces the current route at the top of the stack

Because the url that changes in hash will be recorded by the browser (historical access stack), you will find that both forward and backward browsers can be used. In this way, although the browser does not request the server, the page state is associated with the URL one by one.

History mode

Because the HTML5 standard is released, there are two more API,pushState () and replaceState (). Through these two API (1), you can change the url address without sending requests, and (2) you can not only read the history stack, but also modify the browser history stack.

In addition, there is popState (). The popState event is triggered when the browser jumps to a new state.

Modify historical statu

Includes two methods of pushState,replaceState, which receive three parameters: stateObj,title,url

Window.history.pushState (stateObject, title, URL) window.history.replaceState (stateObject, title, URL) switch historical state

It includes three methods of back,forward,go, which correspond to the forward forward, backward back and jump go operation of the browser. Some students said, (Google) browsers only forward and backward, not jump, well, in the forward and backward long mouse press, all the history of the current window will come out, so that you can jump (perhaps it is more appropriate to call it jump):

History.go (- 2); / / back twice

History.go (2); / / forward twice

History.back (); / / back up

Hsitory.forward (); / / forward

Difference:

In the previous hashchange, you can only change the url fragment after #. The new URL set by pushState can be any URL of the same origin as the current URL.

History mode modifies the URL to be the same as the URL in the normal request backend. If the backend is not configured with routing processing corresponding to / user/id, a 404 error will be returned.

When the user refreshes the page and so on, the browser sends a request to the server, so this implementation requires the support of the server and redirects all routes to the root page.

What are you afraid of in history mode?

Not afraid of moving forward, not afraid of going back, just afraid of refreshing (if the backend is not prepared), because the refresh actually requests the server.

In history mode, you are free to modify path. The final route of the history pattern is reflected in the pathname of url, which will be transmitted to the server, so the server needs to map every possible path value accordingly.

When refreshing, if there is no corresponding response or resource in the server, a 404 will be brushed out every minute.

Router hangs to the root component

New Vue ({router})

At this point, the router will be mounted to the root component this.$options option of the Vue. The presence of router on top of option means it is the root component.

The difference between $router and $route

1. $route can obtain name, path, query, params and so on from the current router jump object (the passed parameters are received by this.$route.query or this.$route.params)

2. $router is a VueRouter instance. If you want to navigate to a different URL, use the $router.push method; the $router.go method is also used to return the previous history

At this point, the study on "how to implement the two modes of vue routing" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.