异常教程

vue3 路由（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发中，单页应用（SPA）因其流畅的用户体验和高效的资源利用，逐渐成为主流开发模式。Vue3 作为新一代 JavaScript 框架，通过其强大的生态支持，为开发者提供了丰富的路由解决方案。Vue3 路由（Vue Router 4+）作为 Vue 官方推荐的路由管理工具，能够帮助开发者高效构建复杂导航逻辑的单页应用。本文将从基础概念、核心功能到进阶用法，系统性地解析 Vue3 路由的核心知识点，并结合实战案例，帮助读者快速掌握这一技术栈。

一、路由的基本概念与核心价值

1.1 路由的定义与作用

路由（Routing）是前端应用中控制页面导航的核心机制。它允许用户在不刷新整个页面的情况下，通过 URL 的变化切换不同的视图内容。例如，访问 /about 路径时，应用会动态加载“关于页面”的组件和数据。

Vue3 路由的引入，解决了传统多页应用（MPA）中频繁页面跳转导致的性能损耗问题。其核心价值包括：

  • 单页化体验：通过动态更新视图内容，提升用户操作的连贯性；
  • URL 状态管理：URL 可直接映射到当前视图状态，支持浏览器历史记录与书签功能；
  • 模块化开发：将页面拆分为独立组件，降低代码耦合度。

1.2 路由的核心组件

Vue3 路由的核心概念包括：
| 组件名称 | 功能说明 |
|----------------|---------------------------------------|
| <router-link> | 声明式导航，用于创建可点击的路由链接 |
| <router-view> | 渲染匹配到的路由组件的容器 |
| router | 全局路由实例，管理路由配置与导航逻辑 |

二、快速上手：创建 Vue3 路由项目

2.1 项目初始化与依赖安装

通过 Vue CLI 或 Vite 快速创建项目，并安装 Vue Router：

npm install vue-router@next

2.2 基础路由配置

在 src 目录下创建 router/index.js 文件，初始化路由实例：

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

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

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

export default router

在 main.js 中挂载路由实例：

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

const app = createApp(App)  
app.use(router)  
app.mount('#app')

2.3 页面跳转与视图渲染

在 App.vue 中使用 <router-view> 渲染匹配的组件，并通过 <router-link> 实现导航：

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

三、路由的高级功能与实践

3.1 动态路由与参数传递

3.1.1 动态路径匹配

通过 :id 或 *path 等通配符定义动态路由，例如：

const routes = [  
  {  
    path: '/user/:id',  
    name: 'UserDetail',  
    component: UserDetail  
  },  
  {  
    path: '/posts/*',  
    name: 'Posts',  
    component: Posts  
  }  
]

3.1.2 参数获取与使用

在目标组件中通过 useRoute() 获取路由参数：

// UserDetail.vue  
import { useRoute } from 'vue-router'  

export default {  
  setup() {  
    const route = useRoute()  
    const userId = route.params.id // 获取动态参数  
    return { userId }  
  }  
}

3.2 嵌套路由与路由重定向

3.2.1 嵌套路由配置

通过 children 属性实现多级路由嵌套：

const routes = [  
  {  
    path: '/dashboard',  
    component: DashboardLayout,  
    children: [  
      { path: '', component: DashboardHome }, // 默认子路由  
      { path: 'projects', component: Projects }  
    ]  
  }  
]

3.2.2 路由重定向与别名

  • 重定向：将旧路径跳转到新路径： 
    { path: '/old-path', redirect: '/new-path' }
  • 别名：为路径创建多个访问入口： 
    { path: '/dashboard', alias: '/control-panel', component: Dashboard }

3.3 路由守卫：控制导航流程

3.3.1 全局守卫

通过 router.beforeEach 实现全局导航拦截，例如权限校验：

router.beforeEach((to, from, next) => {  
  const isAuthenticated = checkAuth()  
  if (!isAuthenticated && to.meta.requiresAuth) {  
    next('/login')  
  } else {  
    next()  
  }  
})

3.3.2 组件内守卫

在目标组件中通过 onBeforeRouteUpdate 监听路由变化：

import { onBeforeRouteUpdate } from 'vue-router'  

export default {  
  setup() {  
    onBeforeRouteUpdate((to, from) => {  
      // 在路由参数变化时更新组件数据  
      loadUserData(to.params.id)  
    })  
    return {}  
  }  
}

四、路由与组件状态管理

4.1 缓存组件与视图复用

通过 <keep-alive> 缓存路由组件，避免重复渲染：

<template>  
  <keep-alive>  
    <router-view v-if="$route.meta.keepAlive" />  
  </keep-alive>  
  <router-view v-if="!$route.meta.keepAlive" />  
</template>

在路由配置中设置 meta 标记：

{  
  path: '/profile',  
  name: 'Profile',  
  component: Profile,  
  meta: { keepAlive: true }  
}

4.2 路由与状态持久化

结合 Pinia 或 Vuex 管理路由状态，例如在导航守卫中同步用户权限：

// store/index.js  
import { defineStore } from 'pinia'  

export const useAuthStore = defineStore('auth', {  
  state: () => ({  
    isAuthenticated: false  
  }),  
  actions: {  
    async login() {  
      // 模拟登录逻辑  
      this.isAuthenticated = true  
    }  
  }  
})

五、进阶技巧与最佳实践

5.1 动态导入与路由懒加载

通过 defineAsyncComponent 实现组件按需加载，优化首屏性能：

import { defineAsyncComponent } from 'vue'  

const routes = [  
  {  
    path: '/posts',  
    component: defineAsyncComponent(() => import('@/views/Posts.vue'))  
  }  
]

5.2 路由模式选择

根据业务需求选择路由模式：

  • history 模式：使用浏览器历史 API，URL 形如 /about（推荐）；
  • hash 模式：URL 包含 # 符号，兼容性更好。

通过 createWebHistory 或 createWebHashHistory 初始化路由实例：

// history 模式  
createRouter({  
  history: createWebHistory()  
})  

// hash 模式  
createRouter({  
  history: createWebHashHistory()  
})

六、常见问题与解决方案

6.1 路由跳转后组件未更新

可能原因：

  • 路由参数变化未触发组件重新渲染；
  • 缓存组件未正确处理数据更新。

解决方案：

  • 在组件中使用 watch 监听 $route 对象；
  • 在 onBeforeRouteUpdate 中执行数据重新加载逻辑。

6.2 路由权限控制不生效

检查点：

  • 守卫函数是否正确注册；
  • meta 字段是否在路由配置中声明；
  • next() 方法是否被正确调用。

结论

Vue3 路由作为 Vue 生态中不可或缺的导航解决方案，凭借其灵活的配置能力和强大的功能扩展性，能够满足从简单单页应用到复杂企业级项目的开发需求。通过本文的系统讲解，读者已掌握了路由配置、参数传递、守卫机制等核心知识点，并通过实战案例理解了如何实现路由的进阶功能。建议开发者在实际项目中结合代码调试工具（如 Vue Devtools）和路由日志功能，进一步优化导航逻辑与用户体验。

未来，随着前端架构的持续演进，Vue3 路由的生态也将不断完善，开发者需关注其新特性（如路由懒加载优化、TypeScript 支持等），以保持技术栈的竞争力。

最新发布

查看更多文章