# Vue3 路由（Vue Router 4）完全指南

你想要掌握 Vue3 中路由的完整用法，我会从安装、基础配置、核心用法 到进阶功能，给你一套最实用、可直接复制的教程。

Vue3 搭配的是 Vue Router 4.x ，语法和 Vue2 有明显区别，采用组合式API写法。

---

一、快速安装

在你的 Vue3 项目中执行：

npm install vue-router@4
# 或
yarn add vue-router@4

---

二、基础配置（标准模板）

1. 创建路由文件

新建 src/router/index.js，这是路由的核心配置文件：

// 1. 导入依赖
import { createRouter, createWebHistory } from 'vue-router'

// 2. 导入页面组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'

// 3. 路由规则配置
const routes = [
  {
    path: '/',
    name: 'Home', // 路由名称（可选）
    component: Home // 对应组件
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

// 4. 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 历史模式（无#）
  routes // 路由规则
})

// 5. 导出路由
export default router

2. 在 main.js 中挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由

// 挂载路由
createApp(App).use(router).mount('#app')

3. 页面挂载路由视图

在 App.vue 中添加：

<template>
  <!-- 路由导航 -->
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>

  <!-- 路由页面渲染出口（核心） -->
  <router-view></router-view>
</template>

---

三、核心用法（必学）

1. 编程式导航（JS 跳转）

Vue3 组合式API 中必须先导入再使用：

<template>
<!-- 路由导航 --> <nav>
<router-link to="/">首页</router-link> 
<router-link to="/about">关于</router-link> </nav>
<!-- 路由页面渲染出口（核心） --> 
<router-view></router-view> 

 <button @click="goToAbout">去关于页（JS）</button>
 
</template>
<script setup>
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 1. 字符串路径跳转
const goToAbout = () => {
  router.push('/about')
}

// 2. 命名路由跳转（推荐，更稳定）
const goToHome = () => {
  router.push({ name: 'Home' })
}
</script>

2. 路由传参（query / params）

方式1：query 参数（地址栏可见，类似 ?id=1）

// 跳转
router.push({ path: '/about', query: { id: 1, name: 'test' } })

// 接收参数
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id) // 1

方式2：params 参数（地址栏不可见，只能用 name 跳转）

// 跳转
router.push({ name: 'About', params: { userId: 10086 } })

// 接收参数
console.log(route.params.userId) // 10086

方式3：动态路由匹配（/user/123）

路由配置：

{
  path: '/user/:id', // :id 是动态参数
  component: () => import('../views/User.vue')
}

接收参数：

console.log(route.params.id)

---

四、进阶功能

1. 路由懒加载（优化性能）

无需提前导入组件，访问时才加载：

const routes = [
  {
    path: '/about',
    component: () => import('../views/About.vue') // 懒加载
  }
]

2. 嵌套路由（子路由）

适用场景：页面内的选项卡、侧边栏布局

const routes = [
  {
    path: '/user',
    component: User,
    children: [ // 子路由
      { path: 'profile', component: UserProfile },
      { path: 'orders', component: UserOrders }
    ]
  }
]

在 User.vue 中添加 <router-view> 展示子页面。

3. 路由守卫（权限控制）

全局守卫（登录校验）

// router/index.js
router.beforeEach((to, from, next) => {
  // to: 要去的页面
  // from: 来自哪个页面
  const isLogin = localStorage.getItem('token')
  
  if (to.path === '/login' || isLogin) {
    next() // 放行
  } else {
    next('/login') // 拦截跳转
  }
})

4. 404 页面配置

{
  path: '/:pathMatch(.*)*', // 匹配所有未定义路由
  component: () => import('../views/NotFound.vue')
}

---

五、常用 API 速查

方法	作用
useRouter()	获取路由实例，用于跳转
useRoute()	获取当前路由信息，用于取参
router.push()	跳转到新页面（保留历史）
router.replace()	替换当前页面（不保留历史）
router.go(-1)	后退/前进页面
<router-link>	声明式导航标签
<router-view>	页面渲染出口

---

总结

1. Vue3 用 Vue Router 4 ，配置用 createRouter + createWebHistory
2. 组合式API 必须用 useRouter/useRoute 操作路由
3. 核心：配置规则 + 挂载 + 渲染出口 三步完成基础路由
4. 传参分 query/params/动态路由三种，按需使用
5. 懒加载、路由守卫是项目必备优化和权限方案