Location>code7788 >text

Vue3 routing configuration and navigation strategy: from zero to master

Popularity：313 ℃/2025-03-03 22:48:33

In modern front-end development, single page applications (SPA) have become the mainstream trend. As one of the core functions, Vue Router provides powerful routing management capabilities, helping developers easily build smooth and efficient single-page applications. This article will take you to explore the routing configuration and navigation operations in Vue3 in depth. From installation to actual combat, we will teach you step by step how to use Vue Router.

1. Why do you need Vue Router?

In a single page application (SPA), front-end routing is responsible for dynamically managing view switching to avoid performance losses caused by page refresh. Officially recommended use of Vue3Vue Router To achieve this capability, it has the following advantages:

  • Seamless integration: Deep binding to Vue3 responsive system
  • Flexible configuration: Supports advanced features such as dynamic routing, nested routing, navigation guards, etc.
  • Multimode support: HTML5 History/Hash routing mode free selection

2. Installation and initialization of Vue Router

2.1 Install Vue Router

Before you start, make sure your project has been initialized as a Vue3 project. If not installedvue-router, the latest version can be installed through the following command:

npm install vue-router@next

After installation is completed, in the projectsrcCreate a directoryrouterFolder and create new ones in itFiles are used to configure routing.

2.2 Configuring a routing instance

1. Recommended project structure:

src/
 ├── router/
 │ └── #Route the main file
 └── views/ # Routing component directory

Next, we need toCreate a routing instance in the file and define routing rules. Here is a complete code example:

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

 // 1. Import routing components (lazy loading is recommended)
 const Home = () => import('@/views/')
 const About = () => import('@/views/')

 // 2. Define routing rules
 const routes = [
   {
     path: '/',
     name: 'Home',
     component: Home,
     meta: { title: 'Home' } // Routing meta information
   },
   {
     path: '/about',
     name: 'About',
     component: About,
     meta: { title: 'About Us' }
   }
 ]

 // 3. Create a routing instance
 const router = createRouter({
   history: createWebHistory(.BASE_URL), // Use History mode
   routes,
   scrollBehavior(to, from, savedPosition) { // Scroll Behavior Control
     return savedPosition || { top: 0 }
   }
 })

 // 4. Global routing guard example
 ((to, from) => {
    = || 'Default Title'
 })

 export default router

2. Key configuration analysis:

  • routesArray: Defines the routing mapping relationship, and each object containspath (path)、name (routing name)andcomponent (corresponding component)）

  • createWebHistory: Use HTML5 History mode (requires server support)

  • createWebHashHistory: Use Hash mode (URL with # number, good compatibility)

  • Lazy route loading:pass() => import()Improve the loading speed of the first screen

  • scrollBehavior: Controls the scroll position when page switching

3. Mounting routes in Vue application

3.1 Global mount routing

After completing the routing configuration, it needs to be mounted to the Vue application. OpenFile, add the following code:

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

const app = createApp(App);
(router);
('#app');

Key points:

  • (router): Mount the routing instance into the Vue application, so that the entire application can use the routing function

  • router-view: Use in templates<router-view>Tags to render matching components

3.2 Routing Egress Component

In the root componentmiddle:

<template>
   <div class="app-container">
     <nav class="global-nav">
       <router-link
         to="/"
         active-class="active-link"
         Exact
       >Home</router-link>
      
       <router-link
         :to="{ name: 'About' }"
         custom
         v-slot="{ navigate }"
       >
         <button @click="navigate">About us</button>
       </router-link>
     </nav>
    
     <router-view v-slot="{ Component }">
       <transition name="fade" mode="out-in">
         <component :is="Component" />
       </transition>
     </router-view>
   </div>
 </template>

 <style>
 .active-link {
   color: #42b983;
   font-weight: bold;
 }

 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.3s ease;
 }

 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
 </style>

Technical Highlights:

  • active-class: Customize the CSS class name of the activation state

  • exact: Exactly match routes

  • v-slot: Customize navigation rendering method

  • Transition animation:pass<transition>Implement page switching animation

4. Detailed explanation of routing navigation methods

4.1 Declarative navigation: Use<router-link>

In Vue, the most common navigation method is through<router-link>Components. It generates a hyperlink, and after clicking it, it triggers a route jump.

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

characteristic:

  • toProperties: Specify the target path

  • Default style:<router-link>It will automatically add the currently activated linkactiveClass name, convenient for developers to customize styles

4.2 Full analysis of programming navigation

1. Basic navigation methods

// Use in a combined API
 import { useRouter } from 'vue-router'

 const router = useRouter()

 // String path
 ('/about')

 // Object form with parameters
 ({ path: '/user/123' })

 // Named route + parameter
 ({
   name: 'User',
   params: { id: 123 }
 })

 // Replace the current route (no history)
 ('/login')

 // Forward/Retreat
 (1) // 1 step forward
 () // Equivalent to (-1)

2. Dynamic routing practice

Define routes with parameters:

{
  path: '/user/:id',
  name: 'User',
  component: () => import('@/views/')
}

Get parameters in the component:

import { useRoute } from 'vue-router'

 const route = useRoute()
 () // Output the id value in the URL

3. Nested Routing

Nested routing is suitable for multi-layered page layouts. For example, a user center page might contain multiple subpages:

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'settings', component: UserSettings }
    ]
  }
];

In the parent component, use<router-view> Render subroutine.

4. Navigation Guard Advanced

Common Guards：

  • Global Guard:beforeEach、afterEach

  • Guards within components:beforeRouteEnter、beforeRouteLeave

// Global front guard
 ((to, from) => {
   if ( && !isAuthenticated) {
     return { path: '/login' }
   }
 })

 // exclusive guard
 {
   path: '/admin',
   component: Admin,
   beforeEnter: (to, from) => {
     // Permission verification logic
   }
 }

 // Guard within components
 onBeforeRouteLeave((to, from) => {
   const answer = ('Are you sure you want to leave?')
   if (!answer) return false
 })

5. Performance optimization skills

5.1 Lazy loading of routes:

const User = () => import(/* webpackChunkName: "user" */ '@/views/')

5.2 Preloading of routing components:

// Preload when the user hover navigation link
 <router-link
   to="/about"
   @mouseenter="preloadAbout"
 ></router-link>

 <script setup>
 const preloadAbout = () => {
   import('@/views/')
 }
 </script>

5.3 Routing segmentation strategy:

dist/
 ├── js/
 │ ├──
 │ ├── # Homepage routing code
 │ └── # About page routing code

6. Troubleshooting of FAQs

Question 1: 404 after page refresh

Solution:

  • History mode requires server configuration Fallback

  • Nginx sample configuration:

location / {
  try_files $uri $uri/ /;
}

Question 2: The routing parameters are not updated

Solution:

Listen to routing changes in components:

watch(
   () => ,
   (newId) => {
     // Retrieve data
   }
 )

7. Summary of best practices

  1. Routing hierarchical management: adoption of large projectsModular routing

  2. Routing meta information: viametaField storage permission identification

  3. Exception handling: Configure global error routing

{
  path: '/:pathMatch(.*)*',
  redirect: '/404'
}
  1. Type safety: Use routing type prompts with TypeScript
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [...]

Related recommendations:

  • Vue3 official routing documentation
  • Vue Router source code analysis

Written at the end
hello! Hello everyone, I am Code_Cracke, a friend who loves programming. Here, I will share some practical development skills and experiences. If you are also passionate about programming, please follow and communicate and learn together!

If you have any questions, suggestions or unique insights about this article, please leave a message in the comment area. Whether it is discussing technical details or sharing project experience, we can make progress together.

<Previous Next>