This is the seventh day of my participation in the First Challenge 2022

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

Writing in the front

Vue Router is a routing plug-in developed by Vue team and deeply integrated with vue. js core, making it very simple for Vue to build a single page program; Vue Router4.x is the latest version of the Vue Router, which is recommended by Vue3. In this article, we will learn about Vue Router4.x.

URL. The hash and History

Vue Router has two kinds of history (record historical routes), which are url. hash and the history provided in HTML5.

Hash history is useful for Web applications without a host (such as file://), or when the configuration server can’t handle arbitrary urls, but hash SEO is terrible;

History is a new addition to HTML5, which is not very IE friendly, but Vue3 has abandoned IE so you don’t have to worry about IE; This approach is by far the most common, but applications must be serviced over the HTTP protocol.

Installation and use process

Install Vue Router as follows:

npm i vue-router
Copy the code

Then write the following code in main.js:

import { createApp } from 'vue'
import App from './App.vue'
// 1 introduce createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 2 Define the route mapping table
const routes = [
  /* more router */
]
// 3 Create a route instance and transmit the configuration
const router = createRouter({
  CreateWebHistory is used here
  history: createWebHistory(),
  // Pass the route mapping table
  routes
})
createApp(App).use(router).mount('#app')

Copy the code

If there are too many routes in the above code, you can define a router.js file and remove it. Example code is as follows:

router.js

export default [
  /* more router */
]

Copy the code

main.js

import { createApp } from 'vue'
import App from './App.vue'
// 2 Import the route mapping table
import routes from './router'

// 1 introduce createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 3 Create a route instance and transmit the configuration
const router = createRouter({
  CreateWebHistory is used here
  history: createWebHistory(),
  // Pass the route mapping table
  routes
})
createApp(App).use(router).mount('#app')

Copy the code

Alternatively, ** can export a route instance directly from ****router.js, which can be used in main.js** (this is more common).

The router – the link and the router – the view

router-link


is a custom component provided by Vue for creating links. The native
is not used in Vue because
reloads the page after changing the URL, whereas

does not. Refer to the documentation for details on what properties are supported by the

component.


router-view

The

component is used for the component that corresponds to the URL, such as this code:

<template>
  <router-link to="/hello"
    ><img alt="Vue logo" src="./assets/logo.png"
  /></router-link>
  <router-view></router-view>
</template>
Copy the code

Then our router.js code looks like this:

import RootComponent from './components/root.vue'
export default[{path: '/'.// Import components
    component: RootComponent
  },
  {
    path: '/hello'.// The route lazily loads the imported component
    component: () = > import('./components/HelloWorld.vue')}]Copy the code

For other configuration items, refer to the documentation.

The code run result is as follows:

Route lazy loading

As our application gets bigger, the JavaScript code gets bigger, which requires us to split the entire application into different pieces. The Vue Router supports this function. We just need to replace static imports with dynamic imports, as shown in the above code:

component: () = > import('./components/HelloWorld.vue')
Copy the code

The packaging (Webpack, Vite) tool then packs these dynamically imported components separately, as shown below:

Dynamic routing

VueRouter allows us to dynamically set routing matching rules. For example, we now have a User component. The content of the component will display different contents according to different IDS.

Such as:

{
  path: '/user/:id'.component: () = > import('@/components/User')}Copy the code

Jump to the template as follows:

<router-link to="/user/10010"></router-link>
Copy the code

Or through the push method provided by the useRouter hook, for example:

import { useRouter } from 'vue-router'
const {push} = useRouter()
push({
  path: '/user'.params: { id: 10010}})/ / or
let id = 10010
push('/user/' + id)
Copy the code

The routing address can be obtained by the hook useRoute, the same usage as useRouter.

Match all Routes

VueRouter’s dynamic routing allows us to match unmatched routes, as shown in the following code:

{
  path: '/:pathMatch(.*)'.component: () = > import('./components/Page404.vue'),},Copy the code

If the previous route fails to match, the route is matched.

Nested routing

Now we have a requirement to store two components in the HelloWorld component and switch between them.

In this case, route nesting comes into play. In fact, route nesting is relatively simple, which is implemented through a children attribute in the route configuration. Example code is as follows:

HelloWorld.vue

<template>
  <h1>Hello World</h1>
  <div
    style=" display: flex; justify-content: space-between; width: 240px; margin: 0 auto; "
  >
    <router-link to="about">about</router-link>
    <router-link to="user">user</router-link>
  </div>
  <router-view></router-view>
</template>

Copy the code

router.js

{
  path: '/hello'.// The route lazily loads the imported component
  component: () = > import('./components/HelloWorld.vue'),
  children: [{path: 'about'.component: () = > import('./components/about.vue'),}, {path: 'user'.component: () = > import('./components/user.vue'),},],},Copy the code

The child component is simpler, with a

tag, and the end result looks like this:

Write in the last

This article to this end, in general, relatively simple without anything too deep, more suitable for entry.

Phase to recommend

  • This article is enough to understand the asynchronous components in VU3
  • Get started with Composition API in 10 minutes
  • There are seven ways to communicate with Vue3 components, not to mention that you can’t communicate with them