认识前端路由& VSCode 实操

基础概念

什么是前端路由？

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

🌐

传统多页面（MPA）

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

⚡

单页面应用（SPA）

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

🗺️

路由就是地图

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

对比项	传统 MPA	前端路由 SPA
页面跳转	整页刷新	✓ 不刷新
路由控制	服务器	✓ 前端 JS
用户体验	有白屏	✓ 流畅
首屏加载	✓ 较快	略慢（需加载JS）
SEO 友好	✓ 天然支持	需额外配置

原理图解

前端路由工作流程

从点击到渲染，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 中从零搭建路由

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

创建 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。

安装依赖并启动

PowerShell 终端

复制代码

cd vue-router-demo
npm install
npm run dev

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

查看自动生成的项目结构

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

vue-router-demo/

├── src/

│ ├── router/

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

│ ├── views/

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

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

│ ├── components/

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

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

└── package.json

读懂路由配置文件 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

读懂根组件 src/App.vue

src/App.vue

复制代码

<template>
  <nav>
    <!-- RouterLink 相当于 <a>，但不刷新页面 -->
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/about">关于</RouterLink>
  </nav>

  <!-- 当前路由匹配的组件渲染在这里 -->
  <RouterView />
</template>

✍️ 动手：新建第三个页面 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，页面不刷新但内容切换 --- 前端路由生效！

🎯 进阶：动态路由（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()  // 放行
  }
})

总结

知识点一览表

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

概念	是什么	代码/示例
路由配置	path → component 的映射表	`{ path: '/about', component: About }`
RouterLink	不刷新的导航链接	`<RouterLink to="/about">`
RouterView	组件的渲染占位符	`<RouterView />`
动态路由	URL 中携带参数	`path: '/user/:id'`
useRoute()	获取当前路由信息	`route.params.id`
useRouter()	编程式导航	`router.push('/home')`
懒加载	按需加载组件，提升性能	`() => import('./About.vue')`
导航守卫	跳转前拦截，做权限检查	`router.beforeEach((to, from, next) => {})`
Hash 模式	URL 含 #，兼容性好	`createWebHashHistory()`
History 模式	URL 干净，需服务器配置	`createWebHistory()`

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