Vue Router 核心知识点梳理

五一假期回来后，复盘Vue Router的时候感觉有点乱乱的，所以索性就把路由模式、嵌套路由、路由跳转、参数获取、懒加载这些核心知识点从头梳理一遍，不然又把它给搞混了，这篇文章用于梳理有关vue router的内容，希望能帮到正在学习vue的你们~

一、首先，先搞懂：Vue Router 到底是干嘛的？

Vue Router 是 Vue 官方路由管理器，核心作用只有一个：

实现单页应用无刷新跳转

URL 改变时，不重新加载整个页面，只替换**<router-view>**里的组件内容，页面切换更流畅。

二、路由核心配置（router/index.ts）

所有路由规则都写在这个文件里，是整个路由的总控制台。

1. 基础依赖导入

将需要管理的组件导入，为了等下的规则定义

TypeScript 复制代码

import { createRouter, createWebHistory, createWebHashHistory, type RouteRecordRaw } from 'vue-router'
// 导入页面组件
import HomeView from '../study_tree/xxx/HomeView.vue'

2. 路由规则定义（routes 数组）

路由分三种：一级路由、嵌套（二级）路由、动态路由，话不多说，上代码。

（1）一级路由（基础）

直接匹配路径，替换根目录的<router-view>。

TypeScript 复制代码

{
  path: '/',
  name: 'home',
  component: HomeView,
},
{
  path: '/about',
  name: 'about',
  // 路由懒加载（后面细讲）
  component: () => import('../study_tree/xxx/AboutView.vue'),
}

（2）嵌套路由（二级路由）

用children配置，必须依赖父组件的才能渲染<router-view>。

TypeScript 复制代码

{
  path: '/admin',
  name: 'admin',
  component: AdminIndex, // 父组件（必须包含 <router-view>）
  children: [
    { path: '', name: 'adminHome', component: Admin }, // 匹配 /admin
    { path: 'info', name: 'adminInfo', component: Info } // 匹配 /admin/info
  ]
}

（3）动态路由参数

页面需要传 ID 时使用（如文章详情、用户详情）。

TypeScript 复制代码

{
  path: '/article/:id', // :id 是动态参数
  name: 'article',
  component: Article
}

3. 路由实例创建（两种模式必区分）

创建路由时必须选模式。

模式	写法	URL 样式	后端支持	适用场景
History 模式	createWebHistory()	/admin、/article/1	需要	正式项目（URL 更美观）
Hash 模式	createWebHashHistory()	#/admin、#/article/1	不需要	本地测试/

TypeScript 复制代码

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

三、最容易混淆：两个核心 API

1.useRouter/useRoute

useRouter 和 useRoute 长得像，作用完全不同，简单来说：

useRouter：操作路由（跳转、前进、后退）
useRoute：获取当前路由信息（参数、路径、名称）

TypeScript 复制代码

import { useRouter, useRoute } from 'vue-router'

const router = useRouter() // 用来跳转
const route = useRoute()   // 用来拿参数

// 跳转路由
router.push('/about')
// 获取动态参数
console.log(route.params.id)
// 获取查询参数
console.log(route.query)

四、路由跳转的两种方式

1. 声明式跳转

用<router-link>替代<a>标签，去无刷新跳转。

TypeScript 复制代码

<!-- 直接路径跳转 -->
<router-link to="/">首页</router-link>
<!-- 按路由名称 + 传参跳转 -->
<router-link :to="{ name: 'article', params: { id: 10 } }">文章详情</router-link>

2. 编程式跳转

适合按钮点击、逻辑判断后跳转。

TypeScript 复制代码

// 按名称跳转（推荐）
function goRouter1(name:string){
  router.push({name:name}) 
}

// 按路径跳转
function goRouter2(path:string){
  router.push({path:path})
}


// template
<div class="nav">
        <a href="javascript:void 0" @click="goRouter1('home')">home</a>
        <a href="javascript:void 0" @click="goRouter2('/about')">about</a>
</div>

tips：javascript:void 0 的作用是阻止a标签的默认跳转/下载行为，只触发点击事件。

五、路由参数（两种传参方式）

1. 动态路径参数（/article/:id）

配置：路由里写 path: '/article/:id'
获取：route.params.id
场景：文章详情、用户详情

2. 查询参数（/?name=xxx&age=18）

配置：router.push({ path: '/home', query: { name: '张三' } })
获取：route.query.name
场景：列表筛选、分页

六、路由懒加载（性能优化）

为什么要用？

如果所有组件都直接导入，打包后文件体积超大，首次加载慢、白屏时间长。

怎么用？

用动态import替代直接导入，路由被访问时才加载对应组件。

TypeScript 复制代码

// 普通导入（打包在一起）
import AboutView from 'xxx'
// 懒加载（拆分打包）
{
  path: '/about',
  name: 'about',
  component: () => import('../study_tree/xxx/AboutView.vue')
}

七、整体逻辑闭环

在index.ts配置路由规则（路径、组件、模式）
用<router-link>或router.push做跳转
用useRoute获取路由参数
用懒加载优化首屏速度
嵌套路由靠父组件的<router-view>渲染

八、小结

Vue Router看似知识点多，其实不看似也是有点多；

核心就围绕配置 → 跳转 → 传参 → 其他 。我感觉就像配置（地图） ---> 跳转(动身去) ---> 传参(带点啥) ---> 其他(需要优化的地方)

当然首要是先把嵌套路由、动态参数、两个 API、两种模式这几个关键点吃透