Vue3's sample code for routing management

How to manage routing in Vue3?

In modern web development, front-end routing management is a key component in building single-page applications (SPAs). With the release of Vue3, Vue Router has also received corresponding updates, especially in combination with a combination API (i.e. setup syntax sugar). In this blog post, we will discuss routing management in Vue3 in detail, introduce basic routing configuration, dynamic routing, nested routing, etc., and provide sample code to let you learn how to use Vue Router for efficient routing management step by step.

1. Install Vue Router

Using Vue Router in a project First install it. Suppose you have created a Vue3 project and can be installed with the following command:

npm install vue-router@4

2. Basic configuration

After the installation is complete, we can start configuring Vue Router. First, create aFile (or, depending on your project structure). In this file, we will introduce Vue Router and define the route.

Code example:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/';
import About from './views/';

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

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

export default router;

In this example, we define two basic routes: / and /about, pointing to and components, respectively.

3. Use Router in the main application

Next, we need to use this router in the Vue app. Open the file and bring in and mount the router onto the Vue instance.

Code example:

import { createApp } from 'vue';
import App from './';
import router from './router';

const app = createApp(App);

(router);

('#app');

4. Use routing in components

In Vue components, we can userouter-linkTags to create route navigation, userouter-viewto render matching components.

Code example:

<template>
  <div >
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
nav {
  display: flex;
  gap: 10px;
}
</style>

In the above code,<router-link>Provides simple navigation, and<router-view>It is used to render the components corresponding to the current route.

5. Dynamic routing

If you need to use dynamic routing in your application, such as user pages or product details pages, you can use parameters in your routing configuration.

Code example:

{
  path: '/user/:id',
  name: 'User',
  component: User,
}

In this example,/user/:idWill match any/user/The path at the beginning,:idis a dynamic parameter. We canGet this parameter in  .

Code example:

<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = ;

    return {
      userId,
    };
  },
};
</script>

6. Nested Routing

Vue Router also supports nested routing, which allows you to better organize your applications. Suppose we want toAboutAdd a subroutine to the page (such as team members).

Code example:

{
  path: '/about',
  name: 'About',
  component: About,
  children: [
    {
      path: 'team',
      name: 'Team',
      component: () => import('./views/'),
    },
  ],
}

In the above code, we added a subroutine named ‘Team’, and its path is/about/team。

Code example:

<template>
  <div>
    <h1>About</h1>
    <router-link to="team">Meet the Team</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

In the About component, we use router-link to navigate to the subroutine and render the subroutine using router-view.

7. Router Guard

Router guards are another important feature of Vue Router that can be used to control access to routes. For example, we can use the global guard to verify that the user is already logged in.

Code example:

((to, from, next) => {
  const isAuthenticated = false; // This should be your authentication logic  if ((record => ) && !isAuthenticated) {
    next({ name: 'Home' });
  } else {
    next();
  }
});

In this example, we simply check if the user is authenticated and redirect to the homepage if there is no access to the route with it.

8. Summary

In this article, we dive into routing management in Vue3. By learning how to configure basic routing, use dynamic routing, nested routing, and route guards, you will be able to build more complex and practical single-page applications. Vue Router's flexibility allows us to configure routing based on the needs of our application, whether it is simple navigation or complex access control.

The above is the detailed content of the sample code for Vue3 routing management. For more information about Vue3 routing management, please pay attention to my other related articles!