Detailed explanation of vue3 vue-router usage

1 Introduction

VueGreat for building single-page applications. For most such applications, it is recommended to use officially supported ones Vue Router; in single-page applications, client-side JavaScript can intercept page jump requests, dynamically obtain new data, and then reload without Update the current page below. This usually results in a smoother user experience, since users in these scenarios often interact multiple times over a long period of time. In this type of single-page application, routing updates are performed on the client side.

Vue RouterIt is the official route of Vue. It is deeply integrated with Vue.js core, making it easy to build single-page applications with Vue.js. Features include:

• Nested route map
• dynamic routing
• Modular, component-based routing configuration
• Routing parameters, queries, wildcards
• Demonstrates the transition effects provided by Vue.js's transition system
• Detailed navigation controls
• Automatically activate CSS class links
• HTML5 history mode or hash mode
• Customizable scrolling behavior
• Correct encoding of URL

Below we will introduce Vue Routerthe basic usage.

2 Use of Vue Router

2.1 Installation

For vue3, we recommend using vue-router 4.x and above. The node environment is installed as follows:

npm install vue-router@4

2.2 Introduction

In our engineering projects, routing files usually need to be managed separately to facilitate subsequent use and maintenance. On this basis, our introduction is divided into two steps:

1. Create a unified management routing entry file
2. The vue project introduces the use of routing entry files

2.2.1 Create routing file

Create the router folder in the same directory as the main.ts file, and add the index.ts file (use ts, the same goes for js).

The contents of the file are as follows:

import {
    
     createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 项目其他页面路由（推荐使用）
import Practice from "../router/practiceFolder/practice";

// vue项目自带路由
const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: "/",
    name: "Home",
    component: Home
  },
  {
    
    
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const routers = [...routes, ...Practice];

const router = createRouter({
    
    
  history: createWebHistory(process.env.BASE_URL),
  routes: [...routes, ...Practice]
});

export default router;

Among them, the object declared using it RouteRecordRawwill be regarded as a routing object and put into the routing object pool.

createRouterCreate routes;

createWebHistoryRepresents routing in HTML5 mode, which is also the recommended mode;

2.2.2 main.ts introduction

code show as below:

import {
    
     createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";


createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

2.3 Use

2.3.1 Use of router-view

After logging in, our single-page application can app.vuebe used in configuration router-viewto switch pages. The code is as follows:

<template>
  <router-view v-slot="{ Component }">
  </router-view>
</template>

After introduction, in the Vue instance, you can $routeraccess the routing instance through. If you want to navigate to a different URL, use this.$router.push(...)to jump

Detailed router-viewusage can be found in vue router-view usage details

2.3.2 Use of router-link

When using , this method <router-link>will be called internally , so clicking is equivalent to callingrouter.push(...)<router-link :to="...">router.push(...)

2.3.3 setupAccess routing and current routing in

Since we setupdon't have access inside this, we can no longer directly access this.$routeror this.$route. As an alternative, we use useRouterthe and useRoutefunctions:

import {
    
     useRouter, useRoute } from 'vue-router'

export default {
    
    
  setup() {
    
    
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
    
    
      router.push({
    
    
        name: 'about',
        query: {
    
    
          ...route.query,
        },
      })
    }
  },
}

2.4 Other APIs

Vue RouterIn addition to the basic APIs introduced above , the following APIs are available:

• NavigationFailureType : Navigation failure type
• START_LOCATION : Default starting location
• createMemoryHistory : Use memory history mode
• createRouterMatcher:
• createWebHashHistory : Create a hash pattern
• createWebHistory : Create html5 mode
• isNavigationFailure : whether navigation failed
• onBeforeRouteLeave : Navigation guard, used in setup, triggered when the component at the current position is about to leave.
• onBeforeRouteUpdate : Navigation guard, used in setup, triggered when the current location is about to be updated.
• parseQuery : parse query parameters
• stringifyQuery : string query parameter
• useLink : Exposes RouterLink's internal behavior as a composable API function.
• useRoute : replace this.$route
• useRouter : replace this.$router

This article refers to the official website for practical operation of vue3 routing configuration. For more comprehensive use, please refer to the official website vue router .