What is vue-router?

What is vue-Router and what does it do? First of all, we need to know the word routing. The routing here is not referring to the hardware router in our daily life. The routing here is the PATH manager of SPA (single page application). Vue-router is the official routing plug-in of vue.js. It is deeply integrated with vue.js and suitable for building single-page applications.

What’s the difference between that and traditional page hopping?

1. The single-page application of VUE is based on routing and components. Routing is used to set access paths and map paths to components.

2. In traditional page applications, some hyperlinks are used to realize page switching and skipping.

In vue-Router single-page applications, switching routes is actually a component switching. The essence of a routing module is to establish a mapping between urls and components.

The reason why you can’t use the A tag is because Vue is a single page application, which is equivalent to having only one main index.html page. There is no actual switching of the page, just the display control of the page.

Vue-router implementation principle

SPA(Single Page Application): a single page application with only one complete page; When it loads a page, it does not load the entire page, but only updates the contents of a specified container.

One of the core aspects of a single page application (SPA) is:

1. Update the view without rerequesting the page;

2. Vue-router provides three modes to implement single-page front-end routing: Hash mode, History mode, and Abstract mode. In the old version, the mode parameter determines which mode is adopted

Routing patterns

Vue-router provides three operating modes:

● Hash: Uses the URL hash value for routing. Default mode.

● History: Rely on the HTML5 History API and server configuration.

● Abstract: Support all JavaScript runtime environments, such as Node.js server, do not rely on the browser API.

Hash pattern

Vue-router default mode is hash mode — the hash of a URL is used to simulate a complete URL, and the page is not reloaded when the URL changes.

Hash (#) is the anchor point of the URL, which represents a location in the web page, changing only the part after the # (/#/..). , the browser will only load the content of the corresponding position, but will not reload the page, that is, the # is used to guide the browser action, completely useless on the server side, HTTP request does not include #; At the same time, every time the part after # is changed, a record will be added to the browser’s access history. Use the “back” button to go back to the previous position. So Hash mode renders different components that specify the DOM position by changing the anchor value.

The History mode

The HTML5 History API provides a way for developers to change the URL of a site without refreshing the entire page by using the history.pushState API to redirect urls without reloading the page.

Since hash mode includes # in the URL, if you don’t want ugly hashes, you can use the history mode of the route, which takes full advantage of the history.pushState API to do url jumps without reloading the page.

When using this history pattern, urls look “normal”, for examplehttps://example.com/user/id. Beautiful!

But here’s the problem. Since our application is a single-page client application, if the route does not exist and the server is not properly configured, the user accessing directly from the browser will get a 404 error. That’s not a good user experience.

The solutions are as follows:
The service side

Routing section (In this way, if the route does not match, the 404 page can be displayed, or can be used according to requirementsRouting guardTo deal with the example found on attachment)

The abstract model

The Abstract pattern uses a browser-independent browser history virtual management back end. Browser-independent API for route jump management.

This mode is used when using SSR server rendering

Through my query, I found another use for this pattern, summed up together, to take advantage of abstract’s browser-independent routing pattern (only for the old version of vue2. X, the new vue3 can’t try to verify this way,createMemoryHistory is still for SSR use).
/*route.js*/ const routes = [{path: "/", redirect: "abstract-route",}, {path: "/ /embed-route", name: "embedded", component: () => import("../views/embed.vue"), }, { path: "/abstract-route", name: "abstract", component: () => import("../views/abstract.vue"), }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) /*abstract.vue*/ <template> <div> <RouterDrawer :visible.sync="visible" :path="{ name: 'embedded' }" size="50%" title="drawer comps" ></RouterDrawer> <el-button @click="visible = true">open drawer</el-button> </div> </template> /*embedded.vue*/ <template> <div> embedded views </div> </template>Copy the code
The router – the drawer encapsulation

The default mode is the history of current project, so in the abstract page, browser Url for http://localhost:8080/abstract-route, and the router – the drawer to do is based on this, Re-instantiate an Abstract route and use
in the component to mount the target page to be embedded. That is:

<template> <el-drawer :visible.sync="visible" v-bind="$attrs" :before-close="handleClose" > <router-view /> </el-drawer>  </template> <script> import { routes } from ".. /router/index"; import VueRouter from "vue-router"; export default { name: "router-drawer", props: { path: { type: Object, required: true, }, visible: { type: Boolean, required: true, default: false,},}, // Instantiate a new router to match the current router-view router: new VueRouter({mode: "abstract", base: "/", routes, }), methods: { handleClose() { this.$emit("update:visible", false); }, }, mounted() { console.log("drawer router", this.$router); this.$router.push(this.path); }}; </script>Copy the code
Code execution results