认识前端路由 VSCode 实操

基础概念

什么是前端路由？

URL 变了，页面不刷新，只换掉局部内容 — 这就是前端路由的全部秘密

🌐

传统多页面（MPA）

每次点击链接都向服务器请求一个新的 HTML 文件，页面完全重新加载，有明显白屏闪烁。

⚡

单页面应用（SPA）

只加载一次 HTML，之后的"跳转"都由前端JavaScript控制，动态替换内容，体验丝滑。

🗺️

路由就是地图

路由表 = 一张地图，把每个URL 路径映射到对应的Vue 组件，告诉浏览器"这条路走哪里"。

原理图解

前端路由工作流程

从点击到渲染，5 个步骤完成一次"路由跳转"

① 用户点击<RouterLink>② URL 变化页面不刷新③ Router 监听onpopstate / hashchange④ 匹配路由表path → component⑤ 渲染组件<RouterView>Hash 模式监听 window.onhashchange，URL 含 #History 模式（推荐）调用 history.pushState()，URL 更干净

两种模式的 URL 长什么样

Hash 模式https://example.com/#/about

History 模式（推荐）https://example.com/about

核心 API

Vue Router 的三个核心角色

理解这三个东西，路由就掌握了 80%

<RouterLink>导航链接相当于 <a> 标签但不会刷新页面触发🗺️ Router路由核心维护路由表path → component执行导航守卫管理历史记录渲染<RouterView>内容显示区当前路由对应的组件渲染于此RouterLink 点击 → Router 查路由表 → RouterView 渲染对应组件

VSCode 实操

在 VSCode 中从零搭建路由

打开终端，跟着步骤一步步操作

1

创建 Vue 项目（选 Router）

在 VSCode 终端（Ctrl + `）中运行：

PowerShell 终端

# 进入你的项目目录 cd C:\Users\22121\Documents # 创建 Vue 项目 npm create vue@latest vue-router-demo

⚠️ 关键选项出现Add Vue Router for SPA development?时，一定选Yes，其他选项可以选 No。

2

安装依赖并启动

PowerShell 终端

cd vue-router-demo npm install npm run dev

浏览器打开http://localhost:5173，看到默认页面说明成功 ✅

3

查看自动生成的项目结构

VSCode 左侧资源管理器中，项目结构如下：

vue-router-demo/

├── src/

│ ├── router/

│ │ └── index.js ← 路由配置文件（核心）

│ ├── views/

│ │ ├── HomeView.vue ← 首页组件

│ │ └── AboutView.vue ← 关于页组件

│ ├── components/

│ ├── App.vue ← 根组件（含 RouterView）

│ └── main.js ← 入口（注册路由）

└── package.json

4

读懂路由配置文件 src/router/index.js

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ // History 模式：URL 更干净，无 # 号 history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', component: HomeView }, // 懒加载：访问 /about 时才加载组件，节省性能 { path: '/about', component: () => import('../views/AboutView.vue') }, ], }) export default router

5

读懂根组件 src/App.vue

src/App.vue

<template> <nav> <!-- RouterLink 相当于 <a>，但不刷新页面 --> <RouterLink to="/">首页</RouterLink> <RouterLink to="/about">关于</RouterLink> </nav> <!-- 当前路由匹配的组件渲染在这里 --> <RouterView /> </template>

6

✍️ 动手：新建第三个页面 ContactView.vue

在src/views/下新建文件ContactView.vue：

src/views/ContactView.vue

<template> <div> <h1>联系我们 📬</h1> <p>邮箱：lijunjie@example.com</p> </div> </template>

然后在router/index.js的 routes 数组里添加一行：

src/router/index.js — 新增一行

{ path: '/contact', component: () => import('../views/ContactView.vue') },

再在App.vue的 nav 里加个链接：

src/App.vue — 新增一行

<RouterLink to="/contact">联系</RouterLink>

✅ 保存后直接在浏览器点"联系"URL 变成/contact，页面不刷新但内容切换 — 前端路由生效！

7

🎯 进阶：动态路由（URL 带参数）

新建src/views/UserView.vue：

src/views/UserView.vue

<script setup> import { useRoute } from 'vue-router' const route = useRoute() // 获取当前路由信息 </script> <template> <div> <h1>用户页面</h1> <!-- route.params.id 获取 URL 中的 :id 参数 --> <p>当前用户 ID：{{ route.params.id }}</p> </div> </template>

在路由表加：

src/router/index.js

// :id 是动态参数，可以是任意值 { path: '/user/:id', component: () => import('../views/UserView.vue') },

💡 试一试浏览器访问http://localhost:5173/user/42，页面显示 "用户ID：42"。 改成/user/99，内容也跟着变 — 这就是动态路由！

进阶概念

导航守卫 — 跳转前的"门卫"

在路由跳转前拦截，用于登录验证、权限控制等

用户点击跳转/dashboard🛡️ 导航守卫router.beforeEach()检查是否已登录？✓ 已登录允许进入渲染目标页面✗ 未登录重定向跳到 /login

src/router/index.js — 添加守卫

// 全局前置守卫：每次路由跳转前都会执行 router.beforeEach((to, from, next) => { const isLoggedIn = localStorage.getItem('token') // 如果目标页需要登录，但未登录 → 跳到登录页 if (to.path === '/dashboard' && !isLoggedIn) { next('/login') } else { next() // 放行 } })

总结

知识点一览表

把这张表背下来，路由相关的面试题基本都能应对

🚀 下一步学什么？掌握基础路由后，可以进一步学习：嵌套路由（路由套路由）、路由元信息（meta）、命名路由、过渡动画、以及结合 Pinia 状态管理。