VUE3 Basic Tutorial: Routing and Navigation

VUE3 is one of the most popular front-end development frameworks currently, which provides a simple, flexible and efficient way to build modern web applications. Routing and navigation are one of the important functions in the VUE3 framework. Through them, you can easily switch and manage between pages.

This tutorial will introduce the basic concepts and usage of routing and navigation in the VUE3 framework, and help you quickly get started with the routing and navigation functions of VUE3.

1. The basic concept of routing

Routing refers to the way to access different pages through different URLs. In VUE3, routing is implemented through the vue-router library. vue-router provides routing definition and management functions.

Before using vue-router, you need to install and introduce the vue-router library. The installation method is as follows:

npm install vue-router

The method of introducing the vue-router library is as follows:

import { createRouter, createWebHashHistory } from 'vue-router'

Among them, createRouter is the method used to create routes, and createWebHashHistory specifies the use of hash mode for routing.

When defining a route, you need to define the path and component of the route. Path is the URL to access the route, and component is the corresponding component.

For example:

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

The above code defines two routes, one is the root path '/', the corresponding component is Home; the other is '/about', the corresponding component is About .

When creating a routing instance, you need to pass in the defined routes, as shown below:

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

history specifies the routing mode, and createWebHashHistory indicates the use of hash mode. Other modes include history mode and abstract mode. routes refers to the routing configuration array.

2. Basic concepts of navigation

In VUE3, after defining the URL and corresponding components through routing, you need to use navigation to switch and jump between pages. change.

Navigation mainly includes two methods: programmatic navigation and declarative navigation.

2.1 Programmatic Navigation

Programmatic navigation refers to page jumps and switches through JavaScript code. Vue Router provides some methods to implement this navigation method.

The following are some commonly used methods:

• router.push: used to jump to the target page and add a new record to the routing history.

router.push('/home')

• router.replace: used to jump to the target page, but does not add a new record to the routing history.

router.replace('/home')

• router.go: Used to move forward or backward a specified number of steps in the routing history, which can be a positive or negative number.

router.go(-1) //后退一步

2.2 Declarative Navigation

Declarative navigation refers to switching and jumping pages through declarations in templates. In Vue Router, you can use the router-link component to implement declarative navigation.

The router-link component can be rendered as an a tag, used to jump to pages through routing links.

For example:

<router-link to="/home">Home</router-link>

The above code means rendering a link. Clicking the link will jump to the '/home' path.

At the same time, the router-link component also supports routing with parameters, for example:

<router-link :to="{ path: '/user/'+userId }">User</router-link>

The above code means rendering a link. Clicking the link will jump to the '/user/123' path. Among them, 123 is a user-defined parameter.

3. Advanced concepts of routing

In VUE3, in addition to basic routing and navigation functions, there are also some advanced concepts of routing, such as routing nesting and naming. Routing, route guards, etc.

3.1 Route nesting

Route nesting refers to combining multiple routes together to form a parent-child relationship. In VUE3, route nesting is achieved by defining sub-routes.

For example:

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

In the above code, a parent route named Layout is defined, which contains two sub-routes, namely the root path '' and '/about'. The child route will be rendered in the parent route's 975b587bf85a482ea10b0a28848e78a4.

3.2 Named routing

Named routing refers to defining a name for the route to facilitate calling it in the program. In Vue Router, the name of the route can be defined through the name attribute.

For example:

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

In the above code, the routes of the root paths '/' and '/about' are named home and about respectively.

In programmatic navigation and declarative navigation, page jumps and switches can be achieved through the corresponding route names.

3.3 Route guard

Route guard means that when the route jumps, the process of route jump can be controlled through some preset hook functions to achieve some specific requirements. In VUE3, Vue Router provides two types of global route guards and local route guards.

Global route guard refers to the unified control of all routes and is generally used for some global operations. The hook functions of the global routing guard include: beforeEach, beforeResolve and afterEach.

Local route guard refers to the specific control of a certain route or a group of routes, and is generally used for some local operations. The hook functions of local route guards include: beforeEnter, beforeRouteUpdate, and beforeRouteLeave.

For example:

router.beforeEach((to, from, next) => {
  // 进行权限判断或其他操作
  next()
})

In the above code, a global route guard is defined through the beforeEach function. to and from respectively represent the upcoming route and the current route, and next represents the function to release the route. It is required Call the next function in the guard to perform the route jump operation.

4. Summary

This tutorial introduces the basic concepts and usage of routing and navigation in the VUE3 framework, as well as some advanced concepts. I hope that through this tutorial, you can master the basic usage of routing and navigation in VUE3, and be able to apply routing and navigation functions in actual projects.

The above is the detailed content of VUE3 Basic Tutorial: Routing and Navigation. For more information, please follow other related articles on the PHP Chinese website!