How to define routing rules in Vue Router

introduction

In modern web development, the use of front-end frameworks is becoming more and more common, and as an excellent front-end framework, there is a very important component in its ecosystem - Vue Router. Vue Router is mainly used to manage page routing, which makes switching between components easier, and also provides mapping between URLs and views, allowing developers to create single-page applications (SPAs). In this blog, we will explore in-depth how to define routing rules in Vue Router, and use examples to help you better understand this concept.

1. Basic concepts of Vue Router

Before diving into the definition of routing rules, let’s briefly understand the basic concepts of Vue Router. Vue Router is the official router manager. It implements the complete functions of front-end routing, allowing us to switch the user interface through the browser's forward and back buttons in the same page.

Install Vue Router

Before using Vue Router, make sure that the Vue framework is installed. Next, we can install Vue Router via npm or yarn:

npm install vue-router

Or use yarn:

yarn add vue-router

After the installation is complete, we first need to introduce and use Vue Router in the Vue instance.

import Vue from 'vue';
import VueRouter from 'vue-router';

(VueRouter);

2. Define routing rules

In Vue Router, the definition of routing rules is mainly achieved through a routing configuration object. This object usually contains multiple routes, each of which defines a path and a corresponding component. Below is an example of basic routing rules configuration.

Sample code: Define basic routing rules

// Introduce view componentsimport Home from './components/';
import About from './components/';
import NotFound from './components/';

// Define routing rulesconst routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '*', // 404 Not Found
    component: NotFound
  }
];

// Create a routing instanceconst router = new VueRouter({
  routes // Abbreviation, equivalent to routes: routes});

// Create Vue instancenew Vue({
  el: '#app',
  router // Inject router into root instance});

In the above code, we define three routing rules:

path: '/'Represents the root path, renderHomeComponents.
path: '/about'Denotes about the page, renderAboutComponents.
path: '*'is a wildcard route that matches all undefined paths and is usually used to display 404 error pages.

2.1 Routing parameters

Vue Router also supports dynamic routing parameters, allowing you to pass parameters in URLs. For example, we can define a user details page with its path as/user/:id,in:idis a dynamic parameter that will be replaced with the actual user ID.

Sample code: Dynamic routing

import User from './components/';

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true // Pass the routing parameters to the component as props  }
];

// In the User component, the dynamic parameter id can be obtained through this.$

In this example, accessing /user/123 will render the User component, and the value of this.$ is 123.

3. Nested routing

For complex applications, we often need to implement nested routing. In Vue Router, nested routing structures can be easily implemented. The implementation of nested routes is to specify a children attribute for a route.

Sample code: Nested routing

import ParentComponent from './components/';
import ChildOne from './components/';
import ChildTwo from './components/';

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child-one',
        component: ChildOne
      },
      {
        path: 'child-two',
        component: ChildTwo
      }
    ]
  }
];

In the above code, access/parent/child-oneand/parent/child-twoWill render separatelyChildOneandChildTwocomponents, andParentComponentAs a parent component, it will also be rendered.

4. Router Guard

Vue Router provides route guarding functionality, allowing us to control the entry and departure of routes. We can use it in the routing definitionbeforeEnterFunction, or global registration route guard.

Sample code: Global Router Guard

((to, from, next) =&gt; {
  (`from ${} arrive ${}`);
  next(); // The next() function must be called to continue navigation});

In the above code, usebeforeEachThe method defines a global guard for all routes and prints out navigation information.

5. Conclusion

In this blog, we learned how to define routing rules in Vue Router, including basic routing, dynamic routing, nested routing, and routing guards. Vue Router's flexibility and scalability make it ideal for building single-page applications. Now, you can customize routing rules according to your project needs and create an application with clear structure and good user experience.

This is the article about how to define routing rules in Vue Router. For more information about Vue Router definition routing rules, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!