Vue Router 4 快速上手教程：Vue3 单页应用路由实现与 Composition API 实战

VueRouter 4 是 Vue3 官方专属的路由管理器，也是 Vue 生态核心库之一，专为 Composition API 设计，实现单页应用（SPA）的路由跳转、组件按需渲染、路由守卫等核心功能，是 Vue3 项目实现页面导航的必备库。

一、核心亮点

• 官方维护，与 Vue3 深度兼容，支持<script setup>语法；
• 体积轻量化，性能优化，路由匹配速度更快；
• 完全适配 Composition API，提供组合式路由钩子；
• 支持路由懒加载、嵌套路由、动态路由、路由守卫；
• TypeScript 支持完善，开发时智能提示友好。

二、快速安装

适配 Vue3 的版本为 VueRouter 4，执行命令安装：

# npm
npm install vue-router@4 -S
# yarn
yarn add vue-router@4
# pnpm
pnpm add vue-router@4

三、核心使用步骤

1. 定义路由组件（示例：创建两个基础页面）

<!-- src/views/Index.vue 首页 -->
<template>
  <div>
    <h1>首页</h1>
    <p>VueRouter 4 基础演示</p>
  </div>
</template>

<!-- src/views/About.vue 关于页 -->
<template>
  <div>
    <h1>关于我们</h1>
    <p>这是 Vue3 + VueRouter 4 的路由示例</p>
  </div>
</template>

2. 配置路由并全局注册（src/router/index.js）

import { createRouter, createWebHistory } from 'vue-router'
// 导入路由组件（支持懒加载，优化首屏加载速度）
const Index = () => import('@/views/Index.vue')
const About = () => import('@/views/About.vue')
// 路由规则配置
const routes = [
  {
    path: '/', // 路由路径
    name: 'Index', // 路由名称（可选）
    component: Index // 对应组件
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]
// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 历史模式（无#号，推荐）
  routes // 注入路由规则
})
export default router

3.入口文件挂载（src/main.js/ts）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例
const app = createApp(App)app.use(router) // 全局挂载路由
app.mount('#app')

4.组件中使用路由（核心标签 + 组合式 API）

<!-- src/App.vue 根组件 -->
<template>
  <div class="app">
    <!-- 路由导航链接：替代 a 标签，无刷新跳转 -->
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于我们</router-link>
    </nav>
    <!-- 路由出口：匹配的路由组件会渲染到这里 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
// 组合式 API：获取路由实例（路由跳转/获取参数）
import { useRouter, useRoute } from 'vue-router'
// 路由实例：用于编程式导航
const router = useRouter()
// 路由信息：用于获取当前路由参数、路径等
const route = useRoute()
// 编程式跳转示例（可在按钮点击等事件中调用）
const toAbout = () => {
  router.push('/about') // 路径跳转
  // 也可通过名称跳转：router.push({ name: 'About' })
}
</script>

<style scoped>
nav {
  margin: 20px 0;
}
router-link {
  margin-right: 20px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
}
router-link.active {
  color: #42b983;
  font-weight: bold;
}
</style>

四、高频实用功能

1.路由懒加载（已在配置中使用）

通过箭头函数导入组件 () => import(‘@/views/Index.vue’)，实现组件按需加载，仅当访问对应路由时才加载组件代码，优化首屏加载性能。

2. 动态路由参数

配置带参数的路由，通过useRoute获取参数：

// 路由规则添加
{ path: '/user/:id', component: () => import('@/views/User.vue') }
// 组件中获取参数
const route = useRoute()
console.log(route.params.id) // 获取动态参数 id

3.全局路由守卫（鉴权 / 拦截）

在 src/router/index.js 中配置，实现全局路由跳转拦截（如登录鉴权）：

// 全局前置守卫：路由跳转前执行
router.beforeEach((to, from, next) => {
  // 示例：判断是否需要登录
  const isLogin = localStorage.getItem('token')
  if (to.path === '/user' && !isLogin) {
    next('/') // 未登录跳转到首页
  } else {
    next() // 正常放行
  }
})

五、核心注意点

1. Vue3 必须使用 VueRouter 4.x 版本，3.x 版本仅支持 Vue2；
2. createWebHistory()为 HTML5 历史模式（无#号），需后端配置重定向；若无需后端配置，可使用createWebHashHistory()（哈希模式，带#号）；
3. <router-link>会自动添加激活类 active，可直接设置样式实现导航高亮；
4. 组合式 API 中，必须在<script setup>或setup()中使用useRouter/useRoute，无法在普通函数中直接调用。

结语

VueRouter 4 是 Vue3 单页应用的官方路由标准，上手简单、功能完善，核心只需完成「配置路由规则 → 全局挂载 → 组件中使用导航 / 出口」三步即可实现基础路由功能。其支持的懒加载、动态路由、路由守卫等特性，能满足从简单到复杂的项目导航需求，是 Vue3 生态中不可或缺的核心库。

以上关于Vue Router 4 快速上手教程：Vue3 单页应用路由实现与 Composition API 实战的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。