This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Today, when I was learning to build a project from 0 to 1, I saw the routing mode in the router and tried to recall the knowledge points I had learned before. I found that I still lacked this knowledge, so I sorted it out again

vue3.0

import { createRouter, createWebHistory } from 'vue-router' //createWebHashHistory
import Home from '.. /views/Home.vue'


const routes = [
    {
        path: '/'.name: 'Home'.component: Home
    },
    {
        path: '/about'.name: 'About'.// route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () = > import('@/views/About.vue')}]const router = createRouter({
    history: createWebHistory(process.env.BASE_URL), / / hash pattern: history: createWebHashHistory ()
    routes
})


export default router
Copy the code

vue2.X

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    {
        path: '/login'.name: 'login'.component: () = > import('@/views/login')},]const router = new VueRouter({
    routes
})
export default router
Copy the code

For the progressive front-end development framework like Vue, in order to build SPA (single-page application), it is necessary to introduce the front-end routing system, which is the significance of vuE-Router. That’s the core of front-end routing — changing the view without making a request to the back end. So there are two types of route history and hash

Difference between Hash mode and History mode

Hash pattern

  1. The route in hash mode contains#Number, such as this URL:http://www.abc.com/#/hello.hashThe value of#/hello
  2. Hash mode passwindow.onhashchangeMethod to listen for route modifications
  3. Hash mode When the page is refreshed, the request URL is sent without the content after the #
  4. The hash mode is compatible with some browsers of earlier versions
  5. After the hash mode is packaged, open it directly in the browser/dist/index.htmlNormal access (for reasons indicated in Article 3)

The history mode

  1. The history mode is displayed using the normal URL path
  2. History modepushState 和 replaceStateMode To modify route changes
  3. When the page is refreshed in history mode, it requests the COMPLETED URL in the current address bar. In this case, the server needs to process this URL. If there is no corresponding file, the server needs to return index.html
  4. History mode is not compatible with older browsers because it is a new specification for HTML5
  5. The History mode is packaged and opened directly in a browser/dist/index.htmlErrors are reported (for reasons indicated in article 3)

The difference between pushState and replaceState methods

History.pushState()

The history.pushState () method is used to add a record to the History.

window.history.pushState(state,title,url)
Copy the code

The method accepts three parameters, in order:

  • State: A state object associated with the added record, primarily for popState events. When this event is fired, the object is passed a callback function. That is, the browser will serialize the object and keep it locally, so it can be retrieved when the page is reloaded. If this object is not needed, null can be used here.
  • Title: Title of the new page. However, all browsers now ignore this parameter, so you can fill in the blank string here.
  • Url: The new url must be in the same domain as the current page. The browser’s address bar will display the url.

Assuming the current url is example.com/1.html, use the pushState() method to add a new record to the History object.

var stateObj = {foo:'bar'}
history.pushState(stateObj,"page2".'2.html')
Copy the code

When a new record is added, the browser’s address bar immediately shows example.com/2.html, but it doesn’t jump to 2.html or even check for the existence of 2.html. It just becomes the most recent record in your browsing history. Enter a new address in the address bar (e.g. Google.com) and click the back button. The page URL will display 2.html. You click the back button again and the URL will display 1.html.

In summary, the pushState() method does not trigger a page refresh, but only causes the History object to change and the address bar to respond. After using this method, you can read out the state object with the history.state property.

window.history.state  // {foo:'bar'}
Copy the code

If the URL parameter to pushState sets a new anchor value (that is, a hash), the Hashchange event is not triggered. Conversely, if the anchor value of the URL changes, a browsing record is created in the History object.

If the pushState() method sets a cross-domain URL, an error is reported.

window.history.pushState(null.' '.'https://twitter.com')
Copy the code

The History object

Summary of a.

The window.history property points to the History object, which represents the browsing history of the current window. The History object holds the url of all pages visited by the current window. The following code indicates that the current window has visited a total of three urls.

window.history.length / / 3
Copy the code

For security reasons, the browser does not allow the script to read these addresses, but does allow navigation between them.

// Go back to the previous url
history.back()
/ / is equivalent to
history.go(-1)
Copy the code

The “forward” and “back” buttons on the browser toolbar actually operate on the History object.

Attributes.

The History object has two main properties.

  • History.length: Number of urls visited by the current window (including the current page)
  • History.state: The state value at the top of the History stack (see more below)

Method three.

Back (), history.forward (), history.go ()

These three methods are used to move through history.

  • History.back() : Move to the previous url, equivalent to hitting the browser’s back button. This method has no effect on the first url visited.
  • History.forward() : Moves to the next url, equivalent to clicking the browser’s forward button. This method has no effect on the last url visited.
  • History.go() : takes an integer as an argument and moves to the url specified by the argument based on the current url, for example, go(1) equals forward() and go(-1) equals back(). If the parameter exceeds the actual url range, the method has no effect.If no parameter is specified, the default parameter is 0, which means refreshing the current page.

Note that when you move to a previously visited page, the page is usually loaded from the browser cache, rather than re-asking the server to send a new page.

History.replaceState()

The history.replacEstate () method modifies the current record of the History object, just as the pushState() method does. Assume the current web page is example.com/example.html

window.history.pushState({page:1},' '.'? page=1')
/ / url displayed as http://example.com/example.html?page=1


window.history.pushState({page:2},' '.'? page=2')
/ / url displayed as http://example.com/example.html?page=2


window.history.replaceState({page:3},' '.'? page=3')
/ / url displayed as http://example.com/example.html?page=3


window.history.back()
/ / url displayed as http://example.com/example.html?page=1


window.history.back()
/ / url displayed as http://example.com/example.html


window.history.go(2)
/ / url displayed as http://example.com/example.html?page=3
Copy the code

Conclusion:

  • The pushState() method adds a new record to the history;
  • The replaceState() method is to replace the current historical record with the legendary capture rebirth!