Summary of three routing modes of Vue

Routing mode analysis

Here we want to talk about the routing mode of vue-router. The first thing we need to understand is that the route is composed of multiple URLs, and different URLs can be used to navigate to different locations accordingly. If you have done server development or have some understanding of the http protocol, you will know that the access to the page in the browser is stateless, so we will make a new request when switching different pages.

In fact, using vue and vue-router development, you will understand that when switching pages, there is no re-request or re-refreshing of the page. It seems that the page is stateful. What is the reason?

This is actually achieved by using the browser's History API, which allows the page to jump without refreshing, and the page status will be maintained in the browser.

model

Use the hash of the URL to simulate a complete URL, so when the URL changes, the page will not reload, and the network path it displays will have a "#" number, which is a little ugly. This is the safest mode because it is compatible with all browsers and servers.

model

The beautified hash mode will remove the "#" in the path. Relying on Html5's history and pushState API, so you have to worry about IE9 and the following version, and don't worry. It also includes three methods: back, forward, and go, corresponding to the browser's forward, backward, and jump operations. It is the operation performed by the forward and back buttons in the upper left corner of the browser.

(-2);//Retreat twice(2);//Go forward twice(); //Back(); //go ahead

However, history also has its shortcomings. It is not afraid of going forward, backward, and jumping, or refreshing (if the backend is not prepared), because refreshing is to actually request the server.

Let's summarize

• hashMode (the default mode URL with # is followed by vue-router) uses the URL's hash value as a route, supporting all browsers. Disadvantages: Only the following # can be changed to implement route jump.
• historyMode (changed to history mode through mode: 'history') HTML5 (BOM) History API and server configuration Disadvantages: Fear of refreshing If the backend does not handle this situation, the front-end refresh will actually request the server. This consumes a lot of time.

model

Suitable for all JavaScript environments, such as server-side use. If there is no browser API, the router will be automatically forced into this mode.

Then in

const router = new VueRouter({routes, mode:'hash|history|abstract',})

Switch here.

Three basic concepts of routing

There are three basic concepts in routing: route, routes, router

• routeIt is a route, which can also be seen from this English word. It is an singular number. Home button => home content, this is a route, about button => about content, this is another route
• routes It is a set of routes that combine each route above to form an array. [{home button =>home content }, { about button => about content }]
• routerIt is a mechanism, equivalent to a manager, which manages routes. Because routes just defines a set of routes, where it is placed is stationary. When the user clicks the home button, the router searches in routes and finds the corresponding home content, so the home content is displayed on the page.

The route in the client is actually the display and hiding of the dom element. When the home content is displayed on the page, all the content in about is hidden, otherwise the same is true. There are two implementations of client routing: hash-based and html5 history API.

router-view: It is mainly used to facilitate rendering of components corresponding to your specified route when building SPA (single-page application). You can use router-view as a container, and the components it renders are specified by you using vue-router

Implementing routing in vue is relatively simple

Because all the content on our page is componentized, we just need to correspond to the path and component, and then render the components in the page.

1. Page implementation (in html template)

In vue-router, we see that it defines two tags <router-link> and <router-view> to correspond to the click and display sections. <router-link> is the part that defines the clicked page, and <router-view> defines the display part, which means where the content of the area is displayed after clicking. Therefore, <router-link> also has a very important attribute to define where to go after clicking, such as: <router-link to="/home">Home</router-link>

2. Configure routing in js

First, we need to define route, an implementation of a route. It is an object consisting of two parts: path and component. path refers to the path, component refers to the component. For example: {path:’/home’, component: home}

We have two routes here, forming a route:

const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]

Finally, create a router to manage the route. It is created by the constructor new vueRouter() and accepts the routes parameter

const router = new VueRouter({
routes // routes: abbreviation of routes})

After the configuration is completed, inject the router instance into the vue root instance, and you can use the route

const app = new Vue({
router
}).$mount('#app')

Execution process: When the user clicks on the router-link tag, he will look for its to attribute. Its to attribute corresponds to the path { path: '/home', component: Home} path configured in js, so that the matching component is found, and finally renders the component to the place where the <router-view> tag is located. All of these implementations are based on hash.

vue-cli create a project to experience it, install vue-router

1. Create two new components in the src directory

and

<template>
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "I am a home component"
    }
  }
}
</script>

<template>
<div>
<h1>about</h1>
<p>{{aboutMsg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
aboutMsg: 'I'm about component'
}
}
}
</script>

2. Define <router-link> and </router-view> in

<template>
<div >
<img src="./assets/">
<header>
<!-- router-link Define the path to which click to navigate to -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</header>
<!-- The corresponding component content is rendered torouter-viewmiddle -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>

3. Create a new router in the src directory

It is to define the path to component mapping.

import Vue from "vue";
import VueRouter from "vue-router";
// Introduce componentsimport home from "./";
import about from "./";
// Tell vue to use vueRouter(VueRouter);
const routes = [
{
path:"/home",
component: home
},
{
path: "/about",
component: about
}
]
var router = new VueRouter({
routes
})
export default router;

4. Inject the route into the root instance and start the route

There is actually another method here, just like injecting vuex store into the root instance, we can also inject vueRouter directly into the root instance. Introduce routes in and inject them into the root instance.

import Vue from 'vue'
import App from './'
// Introduce routingimport router from "./"
new Vue({
el: '#app',
router, // Inject into the root instancerender: h => h(App)
})

5. At this time, click home and about on the page to see the components switch back and forth

But there is a problem. When you first enter the page, nothing is displayed in the page. This is because when you first enter the page, its path is ‘/’, and we did not configure this path accordingly.

Generally, the home page will be displayed as soon as the page is loaded, and we also need to point this path to the home component. But if we write { path: ‘/’, component: Home }, vue will report an error because the two paths point in the same direction.

What to do about this? This requires redirection. The so-called redirection means to specify a direction again. It was originally an access / path. We redirect to '/home', which is equivalent to accessing '/home'. Correspondingly, the home component will be displayed on the page. Redirect is used in vueRouter to define redirects.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.